Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
Ben Nadel at cf.Objective() 2013 (Bloomington, MN) with: Jake Scott
Ben Nadel at cf.Objective() 2013 (Bloomington, MN) with: Jake Scott

Chrome Browser Bug: Scroll Wheel Randomly Stops Working In Overflow Container

By Ben Nadel on

I'm currently in the middle of building out a proof-of-concept for InVision that uses a flexbox layout with some "overflow:auto" scrollable areas. And, as I've been coding this feature, I've noticed that the Chrome browser occasionally stops responding to the scroll wheel on my Logitech Mouse. At first, I thought maybe this was an issue in the way I was using flexbox. But, when I tried to switch from flexbox to "position:absolute", the problem persisted. As it turns out, this is a known bug in Chrome. I wanted to share this problem (and a video of the reproduction steps) in case it was driving anyone else nuts. It's not your fault. It's a browser bug.


 
 
 

 
 
 
 
 

Run this demo in my JavaScript Demos project on GitHub.

View this code in my JavaScript Demos project on GitHub.

In the discussion forum linked above, people state that this happens with any Chrome tab; however, I personally have only experienced the issue with an overflow container - not with the parent page. That said, here is the demo code for the reproduction, as seen in the above video:

  • <!doctype html>
  • <html lang="en">
  • <head>
  • <meta charset="utf-8" />
  • <title>
  • Chrome Browser Bug: Scroll Wheel Randomly Stops Working In Overflow Container
  • </title>
  •  
  • <style type="text/css">
  •  
  • html {
  • box-sizing: border-box ;
  • }
  •  
  • *, *:before, *:after {
  • box-sizing: inherit ;
  • }
  •  
  • /* BEGIN: Layout-A - It uses FLEXBOX and Overflow. */
  • .layout-a {
  • border: 2px solid #cccccc ;
  • display: flex ;
  • flex-direction: column ;
  • height: 500px ;
  • margin: -250px 0px 0px 0px ;
  • position: absolute ;
  • right: 51% ;
  • top: 50% ;
  • width: 300px ;
  • }
  •  
  • .layout-a__top-panel {
  • flex: 1 1 auto ;
  • overflow: auto ;
  • }
  •  
  • .layout-a__bottom-panel {
  • border-top: 1px solid #cccccc ;
  • flex: 0 0 auto ;
  • height: 100px ;
  • padding: 20px 20px 20px 20px ;
  • }
  • /* END: Layout-A. */
  •  
  • /* BEGIN: Layout-B - It uses POSITION ABSOLUTE and Overflow. */
  • .layout-b {
  • border: 2px solid #cccccc ;
  • height: 500px ;
  • left: 51% ;
  • margin: -250px 0px 0px 0px ;
  • position: absolute ;
  • top: 50% ;
  • width: 300px ;
  • }
  •  
  • .layout-b__top-panel {
  • bottom: 100px ;
  • left: 0px ;
  • overflow: auto ;
  • position: absolute ;
  • right: 0px ;
  • top: 0px ;
  • }
  •  
  • .layout-b__bottom-panel {
  • border-top: 1px solid #cccccc ;
  • bottom: 0px ;
  • height: 100px ;
  • left: 0px ;
  • padding: 20px 20px 20px 20px ;
  • position: absolute ;
  • right: 0px ;
  • }
  • /* END: Layout-B. */
  •  
  • .content p {
  • margin: 0px 0px 0px 0px ;
  • padding: 25px 20px 22px 20px ;
  • }
  •  
  • .content p:nth-child( even ) {
  • background-color: #f0f0f0 ;
  • }
  •  
  • </style>
  • </head>
  • <body>
  •  
  • <h1>
  • Chrome Browser Bug: Scroll Wheel Randomly Stops Working In Overflow Container
  • </h1>
  •  
  • <!-- BEGIN: Layout-A. -->
  • <section class="layout-a">
  • <div class="layout-a__top-panel">
  •  
  • <div class="content">
  • <p>Content</p>
  • <p>Content</p>
  • <p>Content</p>
  • <p>Content</p>
  • <p>Content</p>
  • <p>Content</p>
  • <p>Content</p>
  • <p>Content</p>
  • <p>Content</p>
  • <p>Content</p>
  • <p>Content</p>
  • <p>Content</p>
  • </div>
  •  
  • </div>
  • <div class="layout-a__bottom-panel">
  •  
  • Using <strong>Flexblox</strong>
  •  
  • </div>
  • </section>
  • <!-- END: Layout-A. -->
  •  
  • <!-- BEGIN: Layout-B. -->
  • <section class="layout-b">
  • <div class="layout-b__top-panel">
  •  
  • <div class="content">
  • <p>Content</p>
  • <p>Content</p>
  • <p>Content</p>
  • <p>Content</p>
  • <p>Content</p>
  • <p>Content</p>
  • <p>Content</p>
  • <p>Content</p>
  • <p>Content</p>
  • <p>Content</p>
  • <p>Content</p>
  • <p>Content</p>
  • </div>
  •  
  • </div>
  • <div class="layout-b__bottom-panel">
  •  
  • Using <strong>Position Absolute</strong>
  •  
  • </div>
  • </section>
  • <!-- END: Layout-B. -->
  •  
  • <script type="text/javascript">
  •  
  • // Theoretically, the "wheel" event and the "scroll" event should go hand-in-hand
  • // as long as there is room to scroll the content of a container. However, in
  • // Chrome, the scrolling of the mouse-wheel will suddenly stop working (at least
  • // as of Chrome/70.0.3538.102). In that case, we can see the "wheel" event being
  • // logged without a corresponding "scroll" event.
  •  
  • window.addEventListener(
  • "wheel",
  • function handleWheelEvent( event ) {
  •  
  • var direction = ( event.deltaY >= 0 )
  • ? "DOWN"
  • : "UP"
  • ;
  •  
  • console.log( "Event: wheel,", direction, event.target );
  •  
  • },
  • true
  • );
  •  
  • window.addEventListener(
  • "scroll",
  • function handleScrollEvent( event ) {
  •  
  • console.log( "Event: scroll" );
  •  
  • },
  • true
  • );
  •  
  • </script>
  •  
  • </body>
  • </html>

As you can see, I have some "overflow: auto" containers, one using flexbox and one using "position: absolute". I'm also logging the "wheel" and "scroll" events (using the capture phase of the event life-cycle). These two events should go hand-in-hand as long as there is content to scroll. However, it is not that hard to reproduce a case in which the "wheel" indicates an "UP" event, but there is no corresponding "scroll" event (because Chrome isn't scrolling the overflow container):


 
 
 

 
 Chrome browser bug - scrolling stops working in overflow containers, even though wheel event is still being registered. 
 
 
 

As you can see, I can easily get to a point where I am moving the mouse wheel up and down and I am seeing no subsequent scrolling of the overflow container. Then, if I pause for a second or two, and try the mouse wheel again, things will start working as expected.

So, this is a Chrome bug. It's not your fault.


 
 
 

 
 Good Will Hunting - It's not your fault. 
 
 
 

Hopefully this helps maintain the sanity of anyone else who runs into this problem. And, if you have any suggestions on how to work-around the bug, please let us know!


Looking For A New Job?

Ooops, there are no jobs. Post one now for only $29 and own this real estate!

100% of job board revenue is donated to Kiva. Loans that change livesFind out more »

Reader Comments

@All,

So, Sean Roberts - head of the Web Performance here at InVision - has a good theory about this behavior. He believes that the browser is trying to figure out which container is supposed to be receiving the scroll event. As you may know, when you scroll in the browser, it the targeted container runs out of "scrollable content", the browser will start walking up the DOM tree to find parent containers with scrollable content; and, if possible, apply the wheel event said container. This is why, in the past, I've created an Angular directive trap scrolling in a given container:

https://www.bennadel.com/blog/3365-prevent-scrolling-in-a-parent-element-using-directives-in-angular-4-4-6.htm

But, the theory is, the wheel event doesn't look like its being applied to the embedded container because the browser is - at that moment - trying to apply it to the body, which has no scrollable content.

So, the browser is trying to figure out how to provide the best user experience; but, in this case, isn't making the best choice.

Reply to this Comment

Post A Comment

You — Get Out Of My Dreams, Get Into My Comments
Live in the Now
Oops!
NEW: Some basic markdown formatting is now supported: bold, italic, blockquotes, lists, fenced code-blocks. Read more about markdown syntax »
Comment Etiquette: Please do not post spam. Please keep the comments on-topic. Please do not post unrelated questions or large chunks of code. And, above all, please be nice to each other - we're trying to have a good conversation here.