CODEWITHSUNDEEP
javascriptjqueryscroll
gkiely
gkiely

Reputation: 3007

Temporarily disable scroll at position/element with JS

I'm trying to find a way to lock the scroll at at a specified height or element for a certain amount of scrolls.

So in this plnkr I want it to stop on the second slide for 2-3 scrolls, and then proceed. 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>

I've tried the following: How to disable scrolling temporarily?

But if the user scrolls fast enough, they can scroll past the title.

I imagine this is because the UI thread is busy, and then when the JS finally kicks in, the title in the slide is out of view.

A good working example of what I'm looking for is here (on the second slide): http://journey.lifeofpimovie.com/

How does one achieve this effect?

Upvotes: 0

Views: 942

Answers (2)

guest271314
guest271314

Reputation: 1

Try

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>

Upvotes: 0

HAMED
HAMED

Reputation: 353

I think link you have added is using some personal javascript plugins , it doesn't disable scrolling temporarily . I'm not familiar with these plugins but you can search for scrolling webpages plugins like this one : http://alvarotrigo.com/fullPage/ it has some Examples like this one and some others you can try .

Upvotes: 2

Related Questions