Listen to scroll event from overflow:hidden elements

Question

I'm trying to synchronize the scrolling between two separate panels / divs.

One element has overflow: auto while the other has overflow: hidden (sort of trying to replicate a grid with frozen columns).

I can sync the scroll when the event happens within the element with overflow: auto but not the one with overflow: hidden (which is sort of normal if you ask me).

However, is there a workaround for this? I want to synchronize the scrolling both ways.

Here's a fiddle that will illustrate my issue (try scrolling in both panels): http://jsfiddle.net/0zzbkyqg/

Also, this thing seems to happen here already: http://demos.telerik.com/kendo-ui/grid/frozen-columns but I just can't understand how they're doing it.

Ahmad Baktash Hayeri · Accepted Answer · 2015-11-04 18:14:13Z

2

Maybe you should make use of the wheel event which is triggered when you roll the mouse wheel, regardless of whether the section of the view has scrolled or not. Demo

$("#panel-left > table").on('wheel', function (e) { 
     // your logic here
}

answered Nov 4, 2015 at 18:14

Ahmad Baktash Hayeri

5,9004 gold badges32 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Neta · Accepted Answer · 2015-11-04 17:41:28Z

0

I'm thinking you don't need jQuery to do that.

Look here: http://jsfiddle.net/ty0jyr4y/

I've removed the position: absolute and overflow properties from the panels and added float: left to make them inline (could also use display: inline-block), and added height: 400px, width: 417px and overflow: auto to the container.

The container's width is set to 417px instead of 400px because the scroll bar takes 17 pixels of space (across all browsers according to here).

Works beautifully. Is this what you want?

edited Nov 4, 2015 at 17:41

answered Nov 4, 2015 at 17:24

Neta

9016 gold badges14 silver badges31 bronze badges

Collectives™ on Stack Overflow

Listen to scroll event from overflow:hidden elements

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related