javascript - 如何检测元素滚动的结束

Question

我试图让一个自动滚动条向左滚动，然后当滚动条到达尽头时它又回来了……现在的问题是我无法检测到滚动的结束，因为 element.scrollWidth 返回整个元素长度的静态值，包括我猜的溢出部分......并且 element.scrollLeft 返回一个非静态值，该值根据屏幕宽度而变化，因为元素是响应式的.

这是我迄今为止尝试过的片段:

const slider = document.getElementById('container');
var i = 1;
setInterval(() => {
  i === slider.scrollWidth ? (i = -i , i++) : i++
  slider.scrollBy(i  / Math.abs(i), 0);
}, 5)

#container {
  height: 100px;
  width: 300px;
  overflow-x: scroll;
  border: 1px solid black;
}

#slider {
  position: relative;
  width: 1000px;
  height: 100%;
  background-color: green;
}

#start,
#end {
  position: absolute;
  height: 100%;
  width: 10px;
  background-color: white
}

#start {
  left: 1%;
}

#end {
  right: 1%;
}

<div id="container">
  <div id="slider">
    <div id="start"></div>
    <span id="end"></span>
  </div>
</div>

注意:我希望滚动条在到达末尾时准确返回

Answer 1

啊哈!我最近确实遇到了同样的问题，我花了很长时间才得到我想要的简明答案!

这里是我的代码及其工作原理的解释。

首先，在我的默认页面中，它从外部文件调用脚本。
这并不适用于所有人，但如果您想将所有自动滚动的 crud 保存在不同的文件中以使其看起来更整洁，这就是您的做法(并称之为)。

$(document).ready(function () {
   $.getScript('/scripts/scrollableLogic.js', function () {
            var $scrollSpeed = 400000; 
            var $interval = 400000;
            initialiseAutoScroll($scrollSpeed, $interval);
        });
});

其次，在我的外部文件中，我开始了所有的自动滚动。
注意:我有大约 4 个独立滚动的 div，它们都有悬停选择器，可以停止滚动并相互独立地恢复。如果这是您面临的另一个问题，我的代码可能会让您深入了解如何执行此操作 - 如果不是，请询问，我会提供更多代码。同样，我知道此代码示例中仍有未使用的变量 - 这是因为我的代码比此处的代码大得多/复杂得多!

function initialiseAutoScroll(speed, interval) { 
    //Auto scroll my exampleDiv
     $('#exampleDivName')
        .animate({
        scrollTop: $('#exampleDivName').get(0).scrollHeight 
        }, { duration: speed});

    //Detect when scrolling the div
    $('#exampleDivName').bind('scroll', checkScrollPosition);  
};

第三，每次滚动 div 时触发事件，当它在底部时，做一件事。

function checkScrollPosition(div) {
  var $div = $(div.currentTarget);

  //Allows for margin of error in borders + scroll
  if (($($div).get(0).scrollHeight - $($div).scrollTop() == $($div).innerHeight()) ||
      $($div).get(0).scrollHeight - $($div).scrollTop() <= ($($div).innerHeight() + 
      10)) {
      //Perform logic to restart your scrolling or do whatever you want
    }
  }
}

如果其中任何一个似乎没有意义，请询问!

作为对所留下评论的更新: 我所做的就是每次滚动 div 时都有一个事件监听器。在该监听器的一侧，调用了一个函数。这个函数查看 div 的当前滚动位置及其高度，如果它在底部，它会做一些事情。

查看定义:
scrollHeight 属性返回元素的整个高度(以像素为单位)，包括填充，但不包括边框、滚动条或边距。
Element.scrollTop 属性获取或设置元素内容垂直滚动的像素数。
innerheight - 匹配元素集中第一个元素的当前计算内部高度(包括填充但不包括边框)或设置每个匹配元素的内部高度

如果您快速研究并试图找到这些函数的 Javascript 等价物，并将它们放入您的等价函数中，那么它应该是一个很好的起点。

如果您在进一步研究后仍有问题，我会尝试为您模拟一个 Javascript 示例!