Scrolling to next section with javascript on body{overflow:hidden} - CSS-Tricks

This topic is empty.

Viewing 2 posts - 1 through 2 (of 2 total)

Author

Posts
February 23, 2015 at 12:21 pm #196625

hello2pig
Participant

Here is my website structure and with body style(overflow:hidden) and section style(height:100vh; width:100%)

<body>
<section id=”a”>
<section id=”b”>
<section id=”c”>
…
</body>
And I need to go to next section when scroll the page . I use following code to detect scroll event and scroll to next div

$(“body”).bind(‘mousewheel’, function(e){
if(e.originalEvent.wheelDelta < 0) {
//scroll down
if(document-Offset<sectionB-Offset){
$(‘html,body’).animate({
scrollTop: sectionB-Offset
}, 500);
}
…
else{
//scroll up
}
return false;
}
Obviously, the code will cause program hanging up once scroll the page because $(‘html,body’).animate() will be executed too many times. How to modify this code? I’m a new JS coder. Thanks for any help!

February 23, 2015 at 6:20 pm #196649
Shikkediel
Participant
I like to use as few plugins as possible but I am a fan of mousewheel.
Made something similar recently to what you are trying to do :
```
var current = 1, aim;
var level = // number of sections

$(window).mousewheel(function(turn, delta) {

    var shift = true;
    if (delta == 1 && current == 1 || delta == -1 && current == level) shift = false;
    if (shift) {
    if (delta == -1) {
    aim = $($('.option').eq(current).attr('href'));
    current++;
    }
    else {
    aim = $($('.option').eq(current-2).attr('href'));
    current--;
    }
    $('html, body').scrollTop(aim.offset().top);
    }
});
```
It would obviously need some editing because it’s scrolling instantaneously (not animated). Plus it works with anchors for a CSS fallback. The option class is that of the (anchor) links that are clicked. The complete code (preferably on codepen) would help for me to make specific adaptations to match the functionality.
Author

Posts

Viewing 2 posts - 1 through 2 (of 2 total)

The forum ‘JavaScript’ is closed to new topics and replies.