How do I use disable scrolling on click in jQuery?

Question

Trying to disable scrolling if the user clicks a button. I have tried:

$(window).bind('scroll');

Inside a click function, but that doesn't work. Could someone help me? I have looked around and couldn't find a straight answer or a working solution.

What is initializing the scrolling? Depending on the element, you could use ```$(element).click(function(event){ event.preventDefault(); });``` — Christopher Marshall, Sep 29 '14 at 20:48
When users click on buttons it shouldn't scroll at all. I am missing information.. — Alex Denysenko, Sep 29 '14 at 20:48

score 3 · Accepted Answer · answered Sep 29 '14 at 20:51

3

Use CSS:

body{overflow:hidden;}

jQuery:

$("button").click(function(){
  $("body").css("overflow","hidden");
});

answered Sep 29 '14 at 20:51

Control Freak

12,107
25
83
138

@BojanPetkovski It disables scrolling. I'd make a fiddle, but it won't be functional through the jsfiddle app. – Control Freak Sep 29 '14 at 20:58

score 0 · Answer 2 · edited May 23 '17 at 10:28

0

You can try with this

$("button").click(function(){
  $(".div").css({
    'overflow' : 'hidden',
     'height' : '100%'
 });
});

This answer is reference from How to programmatically disable page scrolling with jQuery

edited May 23 '17 at 10:28

Community

1
1

answered Sep 29 '14 at 20:58

Rahul Dess

1,839
1
16
35

score -1 · Answer 3 · edited May 23 '17 at 11:50

-1

The following JSFiddle snippet also disables scrolling through the Arrow Keys or PageUp/Down Keys:

JSFiddle

Mainly the method:

(...)

function disable_scroll() {
  if (window.addEventListener) {
      window.addEventListener('DOMMouseScroll', wheel, false);
  }
  window.onmousewheel = document.onmousewheel = wheel;
  document.onkeydown = keydown;
}

(...)

Reference here.

edited May 23 '17 at 11:50

Community

1
1

answered Sep 29 '14 at 21:07

jsfrocha

1,741
2
19
29

This is not jQuery as the op has requested. – agon024 Apr 18 '19 at 01:08

How do I use disable scrolling on click in jQuery?

3 Answers3

Use CSS:

jQuery: