h5页面流畅滚动

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

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

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

html:

class="p1scroll scrollable"

 

css:

.p1scroll {

  1. overflow-y: scroll;
  2. -webkit-overflow-scrolling: touch;
  3. overflow-scrolling: touch;
  4. position: absolute;
  5. width: 100%;
  6. 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);
  }
})();

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值