Nikola Ivanović Nikola Ivanović - 1 year ago 68
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 Source

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:

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

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

And it will work!

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download