码迷,mamicode.com
首页 > 其他好文 > 详细

特殊功能 集合

时间:2018-09-17 11:46:36      阅读:156      评论:0      收藏:0      [点我收藏+]

标签:size   bottom   方法   poi   上下   css   position   func   scrolling   

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

 

特殊功能 集合

标签:size   bottom   方法   poi   上下   css   position   func   scrolling   

原文地址:https://www.cnblogs.com/hss-blog/p/9660817.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!