这里主要记录一些容易忘的小技巧,持续更新~
scss
- 禁掉图片长按选择
img {
pointer-events:none;
}
- 雪碧图定位方法封装
$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;
}
}
- 移动端顺畅的弹性滚动（android不弹性，ios会弹性 iscroll不支持android4.4以下）
overflow-x:auto;
overflow-y:hidden;
-webkit-overflow-scrolling:touch;
- 最多展示n行
display: -webkit-box;
-webkit-line-clamp: n;
-webkit-box-orient: vertical;
- 文字一行展示省略号
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
- 调整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;
}
- 透明度
opacity: .5;
filter: alpha(opacity=50);
- 画带边线的三角
.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;
}
}
- 实现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
- 自定义方法判断滚顶条是否停止滚动
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;
}
}
- 防止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();
}
});
