Skip to content

Instantly share code, notes, and snippets.

View Troland's full-sized avatar
🎯
Focusing

Tris Roland Troland

🎯
Focusing
94 followers · 32 following
  • China
View GitHub Profile
@Troland
Troland / getElementIndex.txt
Created September 5, 2018 11:44
// get the element index in element list
function getElementIndex($list, $target) {
const nodes = Array.prototype.slice.call($list);
const elementIndex = nodes.indexOf( $target );
return elementIndex;
}
@Troland
Troland / ios-no-scroll.txt
Last active September 3, 2018 06:28
// prevent container such as body scroll along with the dialog
.no-scroll {
position: fixed;
top: 0;
left: 0;
width: 100%;
-webkit-overflow-scrolling: touch;
}
@Troland
Troland / commit-message-guidelines.md
Created August 23, 2018 08:12 — forked from robertpainsi/commit-message-guidelines.md
Commit message guidelines

Commit Message Guidelines

Short (72 chars or less) summary

More detailed explanatory text. Wrap it to 72 characters. The blank
line separating the summary from the body is critical (unless you omit
the body entirely).

Write your commit message in the imperative: "Fix bug" and not "Fixed
bug" or "Fixes bug." This convention matches up with commit messages
@Troland
Troland / pageshow.txt
Created July 14, 2018 07:16
Detect Backward/Forward Cache alias BF cache, if render from cache then reload page.
window.addEventListener('pageshow', (event) => {
// detect Backward/Forward Cache alias BF cache
// if render from cache then reload page
if (event.persisted || window.performance &&
window.performance.navigation.type === 2) {
window.location.reload();
}
};
//jquery 中没有这个对象，需要用原生事件对象
@Troland
Troland / css-flex-horizonal-center.txt
Created June 28, 2018 16:01
/*horizontally center*/
.flex-horizonal-center {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
/* 水平居中*/
-webkit-box-align: center;
@Troland
Troland / css-flex-vertical-center.txt
Created June 28, 2018 16:01
/*vertical center*/
.flex-vertical-center {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
flex-direction: column;
/* 垂直居中 */
@Troland
Troland / mixin.txt
Created June 28, 2018 16:01
mixins
// Flexbox Mixins
// http://philipwalton.github.io/solved-by-flexbox/
// https://github.com/philipwalton/solved-by-flexbox
//
// Copyright (c) 2013 Brian Franco
//
// Permission is hereby granted, free of charge, to any person obtaining a
// copy of this software and associated documentation files (the
// "Software"), to deal in the Software without restriction, including
// without limitation the rights to use, copy, modify, merge, publish,
@Troland
Troland / lib-rem.txt
Created June 28, 2018 16:00
lib-rem
// REM 适配 <html>
// 750px (iPhone 6)
// 此为基准值, 与视觉设计稿 `宽度/2` 保持一致
html[data-rem="375"] {
font-size: 20PX;
}
// 17.06 = 320*20/375 (iPhone 5)
@media only screen and (min-width: 640px) {
@Troland
Troland / css-flex-vertical-direction.txt
Created June 28, 2018 16:00
.flex-vertical-direction {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
flex-direction: column;
}
@Troland
Troland / css-flex-horizonal-direction.txt
Created June 28, 2018 16:00
.flex-horizonal-direction {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
flex-direction: row;
}