h5页面流畅滚动

最新推荐文章于 2025-05-09 13:03:49 发布

佳人与北

最新推荐文章于 2025-05-09 13:03:49 发布

阅读量799

点赞数

CC 4.0 BY-SA版权

分类专栏：功能文章标签：滚动

本文链接：https://blog.youkuaiyun.com/qq_26652185/article/details/95497730

功能专栏收录该内容

25 篇文章

订阅专栏

博客介绍了实现滚动效果的相关代码。HTML部分设置了特定类名，CSS中对该类进行样式设置，包括溢出滚动、触摸滚动等，还设置了宽度和高度为100%，并使用绝对定位，同时提及了JS文件scroll.js。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ps:高必须是100%，且内部高比外部高高。

html:

class="p1scroll scrollable"

css:

.p1scroll {

overflow-y: scroll;
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
position: absolute;
width: 100%;
height: 100%;

}

js: scroll.js

(function() {
  var selScrollable = '.scrollable';
  // Uses document because document will be topmost level in bubbling
  document.addEventListener('touchmove', function(e) {
    e.preventDefault();
  }, {passive: false});
  $('body').on('touchstart', selScrollable, function(e) {
    if (e.currentTarget.scrollTop === 0) {
      e.currentTarget.scrollTop = 1;
    } else if (e.currentTarget.scrollHeight === e.currentTarget.scrollTop + e.currentTarget.offsetHeight) {
      e.currentTarget.scrollTop -= 1;
    }
    if (e.currentTarget.scrollLeft === 0) {
      e.currentTarget.scrollLeft = 1;
    } else if (e.currentTarget.scrollWidth === e.currentTarget.scrollLeft + e.currentTarget.offsetWidth) {
      e.currentTarget.scrollLeft -= 1;
    }
  });
  $(selScrollable).on('touchmove', function(e) {
    if ($(this)[0].scrollHeight > $(this).innerHeight() || $(this)[0].scrollWidth > $(this).innerWidth()) {
      e.stopPropagation();
    }
  });
})();

(function() {
  var agent = navigator.userAgent.toLowerCase(); //检测是否是ios
  var iLastTouch = null; //缓存上一次tap的时间
  if (agent.indexOf('iphone') >= 0 || agent.indexOf('ipad') >= 0) {
    document.body.addEventListener('touchend', function(event) {
      var iNow = new Date().getTime();
      iLastTouch = iLastTouch || iNow + 1 /** 第一次时将iLastTouch设为当前时间+1 */ ;
      var delta = iNow - iLastTouch;
      if (delta < 500 && delta > 0) {
        event.preventDefault();
        return false;
      }
      iLastTouch = iNow;
    }, false);
  }
})();