Question

我正在尝试使自动滚动条向左滚动，然后当滚动条到达末尾时它又回来了……现在的问题是，由于element.scrollWidth返回了a，因此我无法检测到滚动结束包括溢出部分在内的整个元素长度的静态值，我猜是……和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

啊哈！我最近才遇到同样的问题，花了我很长时间才能得到我想要的简洁答案！

这是我的代码及其解释。

首先，在我的默认页面中，它会从外部文件中调用脚本。
这并不是每个人都需要的，但是如果您想将所有自动滚动片段保存在不同的文件中以使其看起来更整洁，这就是您要执行的操作（并调用它）。

$(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示例！

如何检测元素滚动的结束

1 个答案: