1

This question: JQuery Mousewheel: How to disable? has an answer which is what I'm after, but it only works the way I need it to in Firefox.

See this jsFiddle, or the code snippet below.

In Firefox, the page continues to scroll when you reach the .container div with the Lorem Ipsum content, whereas in Chrome it "freezes" / stops dead when you reach the .container div.

Ideally I need it to scroll the page in Chrome as well.

The only way to scroll the content should be with the custom scrollbars (currently not showing in Firefox, but that's less of an issue and not part of this question).

$(".container").bind("mousewheel", function() {
  return false;
  });
.above, .below {
  height:350px;
  background: #ddd;
}

.container {
  overflow: -moz-scrollbars-vertical;
  overflow-y: scroll;
  height: 200px;
}

.container::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
}

.container::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, .5);
  -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="above"></div>
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="below"></div>
Community
  • 1
  • 1
simbasounds
  • 327
  • 5
  • 13
  • In FF it continues to scroll _after_ the content is scrolled, which basically means, the jQuery snippet works in Chrome but not in FF – Asons May 18 '16 at 15:14
  • If you scroll over the scrollbar area in Firefox, then scrollbars become active, and scrolling happens within the div. If you wait until they disappear again, then try scrolling in the div, it scrolls the page, so I'm pretty sure the jQuery is working in Firefox. Edit: it is slightly inconsistent in FF - not perfect. – simbasounds May 18 '16 at 15:43
  • If you put cursor over the `.container` in FF and then scroll with mouse wheel it scrolls, which it doesn't in Chrome and Edge and IE11... which is exactly what the jQuery snippet is suppose to prevent ... what happens in FF is default behavior ... remove the script in Chrome and you'll see – Asons May 18 '16 at 15:56
  • Thanks LGSon - you are correct. Would you happen to know of a solution which scrolls the page, not the content, except for manual click-drag on scrollbars? I seem to recall this being an area of difficulty so I'm not holding my breath for a simple solution. – simbasounds May 18 '16 at 16:09
  • 1
    I suggest you set overflow to hidden and then create your own scroll bar, which can be dragged to scroll the content – Asons May 18 '16 at 16:13
  • True.. that would work / is the direction I'm looking for. Many thanks! – simbasounds May 18 '16 at 16:16
  • 1
    Here is 2 posts you can start look at: http://stackoverflow.com/questions/19743228/scroll-the-page-on-drag-with-jquery ... http://qnimate.com/javascript-scroll-by-dragging/ – Asons May 18 '16 at 16:17
  • And when you got a good solution, please post it here as a self answer ... I upvoted you question and will do so with a working answer as well :) – Asons May 18 '16 at 16:18
  • 1
    Thank you. I will certainly do that : ) – simbasounds May 18 '16 at 16:20

0 Answers0