CODEWITHSUNDEEP
javascriptjqueryhtml
Toza
Toza

Reputation: 1358

Scrolling from one to div to another

I want an effect where if you scroll down, you 'smooth scroll' to the next/previous div, depending on whether you scrolled up or down. So I have a couple of div's

<body>
<div class="wrapper">
    <div class="slide">...</div>
    <div class="slide">...</div>
    <div class="slide">...</div>
    <div class="slide">...</div>
    <div class="slide">...</div>
    <div class="slide">...</div>
</div>
</body>

All of them have a height of 100% ("full screen").

I have a JQuery function that tries to do that, but fails:

var currentSlide = 0;

$(function()
{
    var $prom = $('div.slide');
    $(window).bind('mousewheel', function(event)
    {
        if(event.originalEvent.wheelDelta >= 0)
        {
            if(currentSlide === 0)
                return;
            --currentSlide;
        }
        else
        {
            if(currentSlide >= $prom.length)
                return;
            ++currentSlide;
        }
        var target = $('div.slide')[currentSlide];
        console.log(target);
        $('html, body').animate({
            scrollTop: target; //.offset().top
        }, 1000);
    });
});

fiddle

If I uncomment the code above and connect the target.offset().top it brings me an error, but if I try it like this, it always scrolls me to the first/top div.

How could I fix this? Is there a better solution to it?

Upvotes: 1

Views: 113

Answers (1)

Toza
Toza

Reputation: 1358

Thanks very much to @Abhisek Malakar and @Gene R! He was more than helpful to me! I'll leave this question for them to be accepted.

I will however, show what I did to expand this, since even after the fix I had a problem where it would continue scrolling if you scrolled your mousewheel hard enough (this also fixes touchpads for laptops), and I improved the way page recognizes what div you're currently located in if you use other means of scrolling (dragging the scrollbar/arrows/etc.)

Any improvement advice is more than welcome!

FIDDLE

Again, thanks very much!

var currentSlide = 0,
    scrollSmooth = 1000,
    $prom = $('div.slide');

$(function()
{
    //Adding a binding listener to mousewheel (DOMMouseScroll is for FF)..
    $(window).bind('mousewheel DOMMouseScroll', function(event)
    {
        //Firefox nema argument wheelDelta, ali ima detail
        var delta = (event.originalEvent.wheelDelta !== undefined ? 
            event.originalEvent.wheelDelta : -event.originalEvent.detail);
        if(delta >= 0)
        {
            if(currentSlide === 0)
                return;
            currentSlide--;
        }
        else
        {
            if(currentSlide >= $prom.length - 1)
                return;
            currentSlide++;
        }
        //Turning off scroll functionality untill div is reached
        disableScroll();
        setTimeout(function() 
        { 
            if (window.removeEventListener)
                window.removeEventListener('DOMMouseScroll', preventDefault, false);
            window.onmousewheel = document.onmousewheel = null; 
            window.onwheel = null; 
            window.ontouchmove = null;  
            document.onkeydown = null; 
        }, scrollSmooth);
        var target = $prom[currentSlide];

        $('html, body').animate({
            scrollTop: $(target).offset().top
        }, scrollSmooth);
    });
});

//In case of different kinds of scrolling (arrows/scrollbar...) browser listens
//and changes currentSlide value based on where the scroll currently is.
$(window).scroll(function()
{
    var screenSize = window.innerHeight;
    var scrollSize = $(document).scrollTop();
    for(var i = 0, temp = $prom.length; i < temp; i++)
    {
        if(scrollSize >= screenSize * i)
        {
            currentSlide = i;
        }
    }
});

//Universal method for preventing default behavious
function preventDefault(e) {
  e = e || window.event;
  if (e.preventDefault)
      e.preventDefault();
  e.returnValue = false;
}

function disableScroll() {
  if (window.addEventListener) // firefox
      window.addEventListener('DOMMouseScroll', preventDefault, false);
  window.onwheel = preventDefault; // chrome/MS edge/safari...
  window.onmousewheel = document.onmousewheel = preventDefault; // older browsers
}

Upvotes: 1

Related Questions