原生滚动条的监听和自动上滑

最新推荐文章于 2023-07-22 15:29:54 发布

m0_59324006

最新推荐文章于 2023-07-22 15:29:54 发布

阅读量151

点赞数

分类专栏： SJF-JS 文章标签： javascript

本文链接：https://blog.csdn.net/m0_59324006/article/details/123742075

版权

SJF-JS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

自动判断区域距离下边的距离和滚动：

curRecord.offsetTop是内部子元素的位置，curWrap.scrollTop是整个父级框子的可见高度

timer是模拟上滑动画的效果

changeConditionItem(index, data = {}) {
      // 20220325 susie update start
      let curRecord = document.getElementById('su-condition' + index);
      let curWrap = document.getElementById('su-wrap');
      // 若距离底部wrap小于3行的距离，则向上滑3行，100=每行21*3+缝隙
      if ((curWrap.offsetHeight) - (curRecord.offsetTop - 21 - curWrap.scrollTop) < 100) {
        let totalScroll = 0;
        // 自动上滑时的动画效果
        var timer = setInterval(function() {
          if (totalScroll > 60) {
            clearInterval(timer);
          } else {
            curWrap.scrollTop += 1;
            totalScroll += 1;
          }
        }, 1);
      }
      // 20220325 susie update end
      this.selectedConditionIndex = index;
      this.viewImageAction(data);
    },