scss，js使用——功能小记

这里主要记录一些容易忘的小技巧,持续更新~

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. 实现0.5px的border

HTML部分

    
边框宽度0.5px
    



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. 自定义方法判断滚顶条是否停止滚动

var topValue = 0,// 上次滚动条到顶部的距离
interval = null;// 定时器
document.onscroll = function() {
if(interval == null)// 未发起时，启动定时器，1秒1执行
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){
    //窗口发生改变(大),故此时键盘弹出
    //当软键盘弹出，在这里面操作
    $bottom.hide();
  }else{
    //窗口发生改变(小),故此时键盘收起
    //当软键盘收起，在此处操作
    $bottom.show();
  }
});