JSFiddle - React, Tailwind, and code Playground

by Robert Rees

HTML

<div id="div1">
    <h3>Div 1</h3>
    <a href="#div2">Next</a>
</div>
<div id="div2">
    <h3>Div 2</h3>
    <a href="#div3">Next</a>
    <a href="#div1">Prev</a>
</div>
<div id="div3">
    <h3>Div 3</h3>
    <a href="#div4">Next</a>
    <a href="#div2">Prev</a>
</div>
<div id="div4">
    <h3>Div 4</h3>
    <a href="#div5">Next</a>
    <a href="#div3">Prev</a>
</div>
<div id="div5">
    <h3>Div 5</h3>
    <a href="#div4">Prev</a>
</div>

CSS

body{
    overflow:hidden;
}
div{
    background:red;
}
h3{
    color:#fff;
}
a{
    color:yellow;
    display:inline-block;
    margin-top:320px;
    margin-right:10px;
}
#div3 a
{
    margin-top:500px;
}
}

JavaScript

var $div3 = $('#div3'),
    div3Top = Math.round($div3.offset().top),
    div3Bottom = $div3.height() + div3Top,
    $window = $(window),
    $body = $('body');

$(window).on('scroll', function() {
    
    console.log($window.scrollTop());
    console.log(div3Top);    
    console.log(div3Bottom);
    
    if (($window.scrollTop() >= div3Top) && ($window.scrollTop() + $window.height()) < div3Bottom + 5) {
        $body.css('overflow', 'scroll');
    } else {
        $body.css('overflow', 'hidden');
    }
});