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%。

  • 相关阅读:
    python学习笔记(五)---sublime text 多行代码注释快捷键
    python学习笔记(四)---python不能输出中文问题
    python学习笔记(三)---python关键字及其用法
    python学习笔记(二)---编辑工具sublimeText3运行python
    python学习笔记(一)---python下载以及环境的安装
    idea上查看本文件svn修改的历史版本
    关于app
    Git 上传文件到 码云 gitee
    Vue 图片引入
    Eslint 规则说明
  • 原文地址:https://www.cnblogs.com/diony/p/4515244.html
Copyright © 2011-2022 走看看