Nikola Ivanović Nikola Ivanović - 1 month ago 4
Javascript Question

How to disable visitor's scrolling and allow scroll only on click scrolling to div (<a href="#div">)

I want to disable visitor's scrolling with scroll bar or scroll wheel on mouse and allow only to scroll down with button image .

I tried to add "overflow: hidden" but it just mess up website, demo: here.

And here is demo of my website (with scroll bar and scroll wheel mouse allowed): click here.

Any helps? Thanks.

PS. if im going to get negative ragings and reputation again, please provide any comment with reason why are you giving negative reputation always.

Answer

You can do this with jQuery, just in you index.html file at the top add this line of code :

  jQuery(document.body).css('overflow', 'hidden')

Let me be more precisely, in your code it would be:

$(document).ready(function(){
  //ADD HERE 
  jQuery(document.body).css('overflow', 'hidden')

  $("a").on('click', function(event) {  
    if (this.hash !== "") {
    event.preventDefault();
    var hash = this.hash;
      $('html, body').animate({
      scrollTop: $(hash).offset().top
    }, 800, function(){
      window.location.hash = hash;
        });
      }
    });
});

And it will work!