美文网首页
手机端局部滚动问题 overflow-y:auto|scroll

手机端局部滚动问题 overflow-y:auto|scroll

作者: 白小纯Zzz | 来源:发表于2019-08-29 10:51 被阅读0次
 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);
 */

需要注意的是:假如是纵向滚动:<div id="myscroller_rapper" style="overflow-y:auto;height:540px;-webkit-overflow-scrolling: touch;"></div>滚动框元素必须有高度,默认滚动的是它的第一个子元素(也需要能计算出高度,图片需要加载完成才能计算高宽),多个子元素可以使用<div></div>进行包裹且必须给定高度

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

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

相关文章

  • 手机端局部滚动问题 overflow-y:auto|scroll

    需要注意的是:假如是纵向滚动: 滚动框元素必须有高度,默认滚动的是它的第一个子元素(也需要能计算出高度,图片需要...

  • 2021-03-09

    简单记录 1、局部滚动会给加上overflow-y:auto;去掉此时滚动条的默认样式 .device_list_...

  • 兼容性问题大全

    Q:移动端使用overflow-y: auto; 可以滚动,但是没有出现滚动条,怎么让其显示?A:原文参考 Q:解...

  • 父级position fixed后内容不滚动

    (1)横向滚动left:0;right:0;横向滚动的话overflow-x:scroll;overflow-y:...

  • 实现滚动条

    纵向滚动条: overflow-y:auto; max-height: 800px; 横向滚动条: overflo...

  • 增强 overflow-y:scroll 的滚动性能

    问题 网页中在使用overflow-y: scroll 后,往往会使得滚动卡顿,影响用户体验。 思路 可以从两方面...

  • 深入理解之overflow

    一、overflow的属性 visible 默认值hidden 溢出隐藏scroll 显示滚动条auto 溢出滚动...

  • 移动端web页面元素滚动卡顿

    问题:web网页在移动端滚动不流畅 解决: 给元素加上 : overflow: scroll; //...

  • 面试总结

    1 滚动条的样式定高 overflow-y:auto; 2垂直居中 flex布局 清除浮动.clearfix:af...

  • Angular中使用better-scroll

    better-scroll的使用   由于需要在一个固定的的高度做无限滚动,本来css的overflow-y也可以...

网友评论

      本文标题:手机端局部滚动问题 overflow-y:auto|scroll

      本文链接:https://www.haomeiwen.com/subject/rhnbectx.html