从溢出中收听滚动事件:隐藏元素

时间:2015-11-04 17:20:41

标签: javascript jquery html css

我试图在两个单独的面板/ div之间同步滚动。

一个元素有overflow: auto而另一个元素有overflow: hidden(尝试复制带有冻结列的网格)。

我可以在事件发生时使用overflow: auto来同步滚动,但不能使用overflow: hidden同步滚动(如果你问我,这可能是正常的。)

但是,有解决方法吗?我想同时滚动两种方式。

这里有一个小提琴,可以说明我的问题(尝试在两个面板中滚动):http://jsfiddle.net/0zzbkyqg/

此外,这件事似乎已经发生在这里:http://demos.telerik.com/kendo-ui/grid/frozen-columns但我无法理解他们是如何做到的。

2 个答案:

答案 0 :(得分:2)

也许您应该使用滚动鼠标滚轮时触发的wheel事件,无论视图的部分是否滚动。 Demo

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

答案 1 :(得分:0)

我认为你不需要jQuery来做到这一点。

请看这里:http://jsfiddle.net/ty0jyr4y/

我已从面板中删除了position: absoluteoverflow属性,并添加了float: left以使其内联(也可以使用display: inline-block),并添加了{{1 }},height: 400pxwidth: 417px到容器。

容器的宽度设置为overflow: auto而不是417px,因为滚动条占用了17个像素的空间(根据here在所有浏览器中)。

工作得很漂亮。这是你想要的吗?