手机端局部滚动问题 overflow-y:auto|scroll无效,使用iscroll解决

 var myScroll;
 function loadedscr() {
   setTimeout(function () {
     // 各种参数可以查看相关文档
     // IScroll默认隐藏了其所包含元素的click/tap事件,所以默认情况下,不管用户不管怎么操作,
     //都不能触  发IScroll中元素的click/tap事件,
     //解决方案:在初始化IScroll时,对IScroll进行配置click: true, tap: true
      myScroll = new IScroll('#myscroller_rapper', {
          mouseWheel: true, 
          scrollY: true, 
          scrollbars:true,
          freeScroll: true,
          click: true, 
          tap: true
      });
   });
 }
      // 防止页面未加载完成,导致取不到高宽值
 window.addEventListener('load', loadedscr, false);
  /*  // 如果是图片可能需要图片加载完成才能获取到高宽值
 document.getElementById('imgid').onload = loadedscr;
     // 取消事件的默认动作,如果需要的话
 document.addEventListener('touchmove', function (e) {
      e.preventDefault();
 }, false);
 */

需要注意的是:假如是纵向滚动:

滚动框元素必须有高度,默认滚动的是它的第一个子元素(也需要能计算出高度,图片需要加载完成才能计算高宽),多个子元素可以使用
进行包裹且必须给定高度

IScroll默认隐藏了其所包含元素的click/tap事件,所以默认情况下,不管用户不管怎么操作,都不能触发IScroll中元素的click/tap事件,解决方案:在初始化IScroll时,对IScroll进行配置click: true, tap: true

转自:https://www.cnblogs.com/benlightning/p/6306622.html

你可能感兴趣的:(手机端局部滚动问题 overflow-y:auto|scroll无效,使用iscroll解决)