特殊功能 集合

Posted 2021-01-06 hss-blog

1、实现安卓机器流畅滚动功能

-webkit-overflow-scrolling: auto  |  touch;

auto： 普通滚动，当手指从触摸屏上移开，滚动立即停止

touch：滚动回弹效果，当手指从触摸屏上移开，内容会保持一段时间的滚动效果，继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。

下面是兼容安卓和ios的写法

over-flow: auto;     /* winphone8和android4+ */
-webkit-overflow-scrolling: touch;    /* ios5+ */

我在非body元素，添加这个属性，竟然没有效果。如果添加上overflow-y: scroll,就可以优雅的滚动起来了。

当一个元素设置过position: absolute|relative，后再增加-webkit-overflow-scrolling: touch;属性后，会发现，滑动几次后就滚动区域会卡住，不能在滑动，这时给元素增加个z-index值就可以了。

解决方法：

给元素增加个z-index值

webkit-overflow-scrolling: touch;
position:absolute;
z-index:1;

2、苹果手机不支持 click 事件

<div class="name">点我</div>
$(document).on("click", ".name", function() {
    alert("name");
});

以上代码在电脑浏览器和安卓上都能触发alert事件，但是在ios上却完全没有反应 

查阅了很多信息后，说是iphone这些元素上没有click事件，它是touch事件， 
就是说如果这个name标签是button的可click事件则是可以触发的，因为div本身默认不可点击 

有一个解决方法是给这个元素添加css 
.name{ 
cursor:pointer; 
} 
这样是可以解决的 

但是如果你觉得粗暴的话，可以将click改为touchstart事件，或者共存 

$(document).on(“click touchstart”, “.name”, function() { 
    alert(“name”); 
});

3、（移动端上）有事件监听的元素被点击的时候会被高亮显示

 -webkit-tap-highlight-color: rgba(0, 0, 0, 0)

设置 高亮颜色

4、移动端上 会自动改变字体的大小，解决方法

-webkit-text-size-adjust: none

5、扩展点击区域，stylus

// 扩展点击区域
extend-click()
  position: relative
  &:before
    content: ‘‘
    position: absolute
    top: -10px
    left: -10px
    right: -10px
    bottom: -10px