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

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

Answer 2

尝试

＆＃13;

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);

＆＃13;

/* Styles go here */

html,
body {
  height: 100%;
}
.slide {
  height: 100%;
}
.s1 {
  background: red;
}
.s2 {
  background: orange;
}
.s3 {
  background: yellow;
}

＆＃13;

<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>

＆＃13;

使用JS暂时禁用位置/元素的滚动

2 个答案: