這里主要記錄一些容易忘的小技巧,持續(xù)更新~

scss

1. 禁掉圖片長按選擇

img {
  pointer-events:none;
}

2. 雪碧圖定位方法封裝

$list_style: ("calss1", "class2", "class3");
@each $class in $list_style {
$index: index($list_style, $class)-1;
.#{$class} .logo {
background-position: (100%/(length($list_style)-1))*$index 0;
}
}

3. 移動端順暢的彈性滾動（android不彈性，ios會彈性 iscroll不支持android4.4以下）

overflow-x:auto;
overflow-y:hidden;
-webkit-overflow-scrolling:touch;

4. 最多展示n行

display: -webkit-box;
-webkit-line-clamp: n;
-webkit-box-orient: vertical;

5. 文字一行展示省略號

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

6. 調整placeholder樣式，兼容性寫法

.cs_input::-webkit-input-placeholder { /* WebKit browsers */
  color: #D2D9D8;
}
.cs_input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  color: #D2D9D8;
}
.cs_input::-moz-placeholder { /* Mozilla Firefox 19+ */
  color: #D2D9D8;
}
.cs-input:-ms-input-placeholder { /* Internet Explorer 10+ */
  color: #D2D9D8;
}

7. 透明度

opacity: .5;
filter: alpha(opacity=50);

8. 畫帶邊線的三角

.no_interesting_triangle{
position: absolute;
top: -7px;
right: 14px;
border: 8px solid transparent;
border-top-width: 0;
border-bottom-color: $gray5;
  &:before{
  content: '';
  position: absolute;
  top: 2px;
  right: -8px;
  border: 8px solid transparent;
  border-top-width: 0;
  border-bottom-color: $white;
  z-index: 1;
  }
}

9. 實現(xiàn)0.5px的border

HTML部分
<div class="scale-border ">
    <div class="content">邊框寬度0.5px</div>
    <div class="border border-color"></div>
</div>

CSS部分
.scale-border {
    margin: 10px auto;
    height: 100px;
    position: relative;
    padding: 10px;
    width: 200px;
}
.content {
    position: relative;
    z-index: 2;
}
.border {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    position: absolute;
    border: 1px solid #333;
    top: -50%;
    right: -50%;
    bottom: -50%;
    left: -50%;
    border-radius: 10px;
    background-color: #eee;
}

JS

1. 自定義方法判斷滾頂條是否停止?jié)L動

var topValue = 0,// 上次滾動條到頂部的距離
interval = null;// 定時器
document.onscroll = function() {
if(interval == null)// 未發(fā)起時，啟動定時器，1秒1執(zhí)行
interval = setInterval("test()", 1000);
topValue = document.documentElement.scrollTop;
}
function test() {
// 判斷此刻到頂部的距離是否和1秒前的距離相等
if(document.documentElement.scrollTop == topValue) {
alert("scroll bar is stopping!");
clearInterval(interval);
interval = null;
}
}

2. 防止input輸入框輸入法彈出時，將fixed定位按鈕頂起

var winHeight = $(window).height();
var $bottom = $dom.find('#bottom');
$(window).on('resize', function(){
  var thisHeight=$(this).height();
  if(winHeight - thisHeight >50){
    //窗口發(fā)生改變(大),故此時鍵盤彈出
    //當軟鍵盤彈出，在這里面操作
    $bottom.hide();
  }else{
    //窗口發(fā)生改變(小),故此時鍵盤收起
    //當軟鍵盤收起，在此處操作
    $bottom.show();
  }
});