Question

我有一个包含几个高度为100％的孩子的div。在滚动时，我总是想要向下或向上一个孩子的高度，所以100％。不幸的是，我无法弄清楚如何防止一次滚动多个步骤。我尝试了event.preventDefault()并且还使用了超时，但都没有用。

Check out the fiddle看看到目前为止我得到了什么 - 以及问题究竟是什么样的。

$container = $('#container');
var doScroll = true;
var top = 0;

$container.on("scroll", function(event){
    event.preventDefault();
    if (doScroll) {
        doScroll = false;
        top += $container.height();
        console.log("scroll event fired");
        $container.animate({scrollTop: top}, '700', 'swing', function() { 
            doScroll = true;
        });
    } 
});

#container {
  height: 500px;
  width: 300px;
  overflow-y: auto;
  overflow-x: hidden;
}
.child {
  height: 100%;
  width: 100%;
}
.red {
  background-color: red;
}
.blue {
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container">
  <div class="child red">Child 1</div>
  <div class="child blue">Child 2</div>
  <div class="child red">Child 3</div>
  <div class="child blue">Child 4</div>
  <div class="child red">Child 5</div>
</div>

Answer 1

就个人而言，我会使用位置哈希#。

如果您将锚点放在包含href="#child1"的div中，那么您可以通过location.hash="#child1"使用javascript滚动到它们。

要动画滚动到位置哈希，请查看this script

Answer 2

实际上，您的代码中存在三个问题，这会产生混淆：

scroll活动cannot be cancelled。
$.animate scrollTop会在完整功能运行后立即触发scroll事件。
所有动画都会排队执行，无论doScroll有什么价值。

这里最大的问题是动画触发的额外scroll事件。要克服这个问题，您必须仔细管理事件处理，例如跳过动画触发的事件。

例如，see the working demo，它也会在每次运行后清除动画队列。

在div内滚动100％步骤

2 个答案: