使用 JS 暂时禁用 position/element 处的滚动

Question

我正在尝试找到一种方法来将滚动锁定在指定高度或元素以进行一定数量的滚动。

所以在这个 plnkr 中，我希望它在第二张幻灯片上停止 2-3 卷，然后继续。 http://plnkr.co/edit/BAlFMLBhzVaqWuwhGCu8?p=preview

<div class="slide s1">S.O. made me include some code with plnkr link</div>
<div class="slide s2">Title 2</div>
<div class="slide s3">Title 3</div>

我试过以下方法： How to disable scrolling temporarily?

但是如果用户滚动得足够快，他们可以滚动超过标题。

我想这是因为 UI 线程很忙，然后当 JS 最终启动时，幻灯片中的标题看不到了。

这里是我正在寻找的一个很好的工作示例（在第二张幻灯片上）：http://journey.lifeofpimovie.com/

如何实现这种效果？

Answer 1

我认为 link 您添加的是使用一些个人 javascript 插件，它不会暂时禁用滚动。我不熟悉这些插件，但您可以搜索像这样的滚动网页插件：http://alvarotrigo.com/fullPage/ 它有一些示例，例如 this one 和其他您可以尝试的示例。

Answer 2

尝试

var $w = $(window);
var $slides = $('.slide');
$.fx.interval = -100;
var scrollTiles = function scrollTiles(e) {
    var el = $slides.filter(function (i, el) {
        return el.getBoundingClientRect().bottom > 
               parseInt($(el).css("height")) + 10
    }),
        // select second tile
        tileId = el.prev().is($slides) 
                 ? el.prev().index() 
                 : $slides.eq(-1).index();
    // do stuff at second tile
    if (tileId === 2) {
        $slides.not(":eq(" + (tileId - 1) + ")")
            .hide(0, function () {
            $w.off("scroll.tiles");
            $(this).queue("tiles", function () {
                $(this).show(0)
            })
            // delay scroll three seconds 
        }).delay(3000)
            .dequeue("tiles")
            .promise()
            .done(function (elems) {
            // after three second delay ,
            // scroll to third tile
            $("body").animate({
                scrollTop: elems.eq(-1).offset().top
            }, 500, "linear", function () {
                // prevent delay at second tile
                // until after scroll to first tile from third tile , 
                // reset `scroll.tiles` event  
                $w.on("scroll.t", function (e) {
                    if (elems.eq(0)[0].getBoundingClientRect().bottom > 
                        elems.eq(0).height()) {
                            $(this).off("scroll.t")
                            .on("scroll.tiles", scrollTiles)
                    }
                })
            })    
        })    
    }
};

$w.on("scroll.tiles", scrollTiles);

/* Styles go here */

html,
body {
  height: 100%;
}
.slide {
  height: 100%;
}
.s1 {
  background: red;
}
.s2 {
  background: orange;
}
.s3 {
  background: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>

<body>
  <div class="slide s1">Title 1</div>
  <div class="slide s2">Title 2</div>
  <div class="slide s3">Title 3</div>
</body>

使用 JS 暂时禁用 position/element 处的滚动

Temporarily disable scroll at position/element with JS

javascript

jquery

scroll