zoukankan      html  css  js  c++  java
  • iScroll滚动区域中select、input、textarea元素无法点击的Bug修复

    最近在一个项目中使用了iScroll4模拟滚动效果,调试过程中发现一个表单页中的所有表单项都无法点击聚焦, 如<select>、<input>、<textarea>。这是因为iScroll要监听整个页面事件,为了达到 最优效果,它默认禁用了所有元素的默认事件(但也有例外,如<a>默认事件不受影响),所以才造成这些表单元素点击没有反应,无法正常聚焦。

    我们打开 iscroll.js ,找到这一行:
    onBeforeScrollStart : function(e){ e.preventDefault(); },
    将其改为:
    onBeforeScrollStart : function(e){var nodeType = e.explicitOriginalTarget ? e.explicitOriginalTarget.nodeName.toLowerCase() : (e.target ? e.target.nodeName.toLowerCase() : ”);if(nodeType != ‘select’ && nodeType != ‘option’ && nodeType != ‘input’ && nodeType != ‘textarea’){e.preventDefault();}},

    这样,input及textarea可以正常聚焦了,但是发现select点击还是没有弹出下拉列表框。

    这是因为 iscroll 默认使用的是css的transform变形中的translate3d实现区域滚动,每次滚动实际是改变translate3d中的y轴值,实际的 dom位置并没有发生变化。translate3d会导致页面的焦点错误,系统级下拉菜单的显示则会导致其出现显示偏离。

    控制滚动模式的代码默认是:useTransform: true。好在iscroll提供了另一种滚动方式,基于绝对定位位置变化的滚动。修改为useTransform: false之后,iscroll就会使用对定位位方式来实现滚动,该方式是我们在web开发中模拟动画的最常用方式,滚动之后dom的实际位置也同步发生 了变化,不会出现错位偏离现象。

    以上修改后,所有的表单元素都能正常使用了,不过需要注意,使用对position决定定位后,滚动区的宽度默认会自适应内容宽度,而不是父元素的100%,所以最好将滚动区域宽度设为100%。

  • 相关阅读:
    何为 ISAPI
    MacDown-The open source Markdown editor for OS X.
    Atom使用
    运维
    Perl
    Kaggle
    J2EE
    leetcode
    Tensorflow 学习笔记
    EXCEL公式及宏
  • 原文地址:https://www.cnblogs.com/diony/p/4515244.html
Copyright © 2011-2022 走看看