Avoid scroll through mouse or scroll bar

Question

In the current state, on my website I am able to scroll through different sections using the navigation buttons I created, or the mouse scroll or through keyboard or dragging the scroll bar.

What I want is that the user should be able to navigate through the sections only using the navigation radio buttons that I have created and nothing else.

My CODE:

html:

        <ul class="scrollLinks">
            <li class="active"><a href="#heroOneData"></a></li>
            <li><a href="#heroTwoData"></a></li>
            <li><a href="#heroThreeData"></a></li>
            <li><a href="#heroTwoData" class="scrollArrow"><img src="<?php echo get_template_directory_uri(); ?>/img/scrlDnArrow.png" /></a></li>
        </ul>

TARGET HTML:

<div data-related="heroOneData">
   ...content...
</div>
<div data-related="heroTwoData">
   ...content...
</div>
<div data-related="heroThreeData">
   ...content...
</div>

jQuery:

$('.scrollLinks li a').click(function(){
    var hashRaw = $(this).attr('href'); 
    var hash = hashRaw.substring(1);
  jQuery('html, body').animate({
        scrollTop: jQuery( "[data-related='"+hash+"']" ).offset().top
  }, 1000);
});

Have you tried `html, body { height:100%; overflow:hidden; }` in your css? — Batu.Khan, Jan 02 '16 at 10:02
http://stackoverflow.com/questions/4770025/how-to-disable-scrolling-temporarily — Renuka CE, Jan 02 '16 at 10:03
Below link will help u to make a decision http://stackoverflow.com/questions/4770025/how-to-disable-scrolling-temporarily — ansarmon, Jan 02 '16 at 10:18

score 0 · Accepted Answer · answered Jan 04 '16 at 04:53

0

Solution:

html, body { height:100%; overflow:hidden; }

Credit:

Darth Batu Khan

answered Jan 04 '16 at 04:53

Kiran Dash

4,816
12
53
84

Avoid scroll through mouse or scroll bar

1 Answers1