How to disable mousewheel panning in javascript/jquery?

Question

I have a div, which has

.A {
    max-height:100px;
    overflow-y: hidden;
}

I don't want it to scroll. However I noticed the user can still click down with a mousewheel then move the mouse up or down and it simulates a scroll. The div box goes up and down. How can I disable this?

https://jsfiddle.net/2aoeyfbL/

Thanks

The div has content and the content scrolls up and down as if the vertical scroll bar is there. — omega, Mar 26 '18 at 19:47
I cant see the problem.I cant scroll inside the div, even with mouse's middle scroller — vinayakj, Mar 26 '18 at 19:48
It does happen sometimes, and im on latest version of chrome. — omega, Mar 26 '18 at 19:49
Its a bit tricky to do, but you have to click with mouse wheel, then move mouse left of div and outside of the div then go up or down. — omega, Mar 26 '18 at 19:50
Did you check [this answer](https://stackoverflow.com/questions/5136845/prevent-middle-mouse-click-scrolling)? — sabithpocker, Mar 26 '18 at 19:50
@omega: That's probably windows only. Try this fiddle: Click inside, then hit tab: https://jsfiddle.net/2aoeyfbL/4/ — H.B., Mar 26 '18 at 19:50
@sabithpocker: That is also just a hack that does not capture everything. — H.B., Mar 26 '18 at 19:51
got you man.. after pressing hard & moving around it did scroll.. but would someone do that — vinayakj, Mar 26 '18 at 19:52
I know a **great** solution, just reset scroll position every single frame XD — H.B., Mar 26 '18 at 19:53
I just did this `$('.A').bind("scroll", function(e) { this.scrollTop = 0; });` — omega, Mar 26 '18 at 20:03

score 0 · Answer 1 · answered Mar 26 '18 at 20:04

0

This seems to work all the time, even by pressing tab when there is an input box inside the div.

$('.A').bind("scroll", function(e) {
    this.scrollTop = 0;
});

answered Mar 26 '18 at 20:04

omega

40,311
81
251
474

Kiranmoy Pradhan · Answer 2 · 2018-03-26T20:43:16.957

0

Fix the position of the div

.A {
    max-height:100px;
    overflow-y: hidden;
    position:fixed;
}

edited Mar 26 '18 at 20:43

answered Mar 26 '18 at 20:10

Kiranmoy Pradhan

61
1
8

1

this will mess up the rest of the page. I only want this to affect the `.A` tags. – omega Mar 26 '18 at 20:11
default overflow is coming from the body.If you do not hide the overflow of the body, The default overflow always appears.body is the parent of div. – Kiranmoy Pradhan Mar 26 '18 at 20:35
.A { max-height:100px; overflow-y: hidden; position:fixed; } – Kiranmoy Pradhan Mar 26 '18 at 20:38

How to disable mousewheel panning in javascript/jquery?

2 Answers2