• 特殊功能 集合


    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
  • 相关阅读:
    AutoCAD 相关的在线多级同步的一些资料收集 beta
    FUSLOGVW 工具来报告错误的具体信息
    [转]阿朱:帮助过我的那些书和人
    Accelerated C++ 习题答案
    一些帮助理解的短视频
    Visual Studio 控制台程序无法输出中文
    [翻译]ObjectArx.Net下Invoke非托管的函数
    LINQ&EF任我行(二)LinQ to Object (转)
    软件编程中的21条法则[转]
    VAssistX的VA Snippet Editor使用小讲 [转]
  • 原文地址:https://www.cnblogs.com/hss-blog/p/9660817.html
Copyright © 2020-2023  润新知