CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Zubzob
Zubzob

Reputation: 2743

Listen to scroll event from overflow:hidden elements

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.

Upvotes: 0

Views: 845

Answers (2)

Ahmad Baktash Hayeri
Ahmad Baktash Hayeri

Reputation: 5880

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
}

Upvotes: 2

Neta
Neta

Reputation: 901

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?

Upvotes: 0

Related Questions