我有这个文件比较代码:http: //jsfiddle.net/CrN6X/
现在它做了我需要的:
- 一个只垂直滚动的大 div
- 仅水平滚动的两个较小的潜水
这样我可以很容易地比较我的文件,但我有一个问题:只有当我一直向下滚动时才能访问底部滚动条。
如何使它们浮动或将滚动条移动到另一个 div,总是可以看到,这样我就不需要将另一个 div 一直向下滚动到底部来访问它们?
我有这个文件比较代码:http: //jsfiddle.net/CrN6X/
现在它做了我需要的:
这样我可以很容易地比较我的文件,但我有一个问题:只有当我一直向下滚动时才能访问底部滚动条。
如何使它们浮动或将滚动条移动到另一个 div,总是可以看到,这样我就不需要将另一个 div 一直向下滚动到底部来访问它们?
这里的 javascript 是您真正需要的,但我添加了 html,以便您可以看到它的实际效果。
$("#div1").scroll(function () {
$("#div2").scrollTop($("#div1").scrollTop());
$("#div2").scrollLeft($("#div1").scrollLeft());
});
$("#div2").scroll(function () {
$("#div1").scrollTop($("#div2").scrollTop());
$("#div1").scrollLeft($("#div2").scrollLeft());
});
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div id="div1" style="float:left;overflow:auto;height:100px;width:200px;">
<p>lulz</p>
<p>lulz</p>
<p>lulz</p>
<p>lulz</p>
</div>
<div id="div2" style="float:right;overflow:auto;height:100px;width:200px;">
<p>lulz</p>
<p>lulz</p>
<p>lulz</p>
<p>lulz</p>
</div>
为了避免使用鼠标滚轮滚动时出现滚动滞后效应,我们需要禁用第二个滚动事件触发器。在下面检查我的方法:
var ignoreScrollEvents = false
function syncScroll(element1, element2) {
element1.scroll(function (e) {
var ignore = ignoreScrollEvents
ignoreScrollEvents = false
if (ignore) return
ignoreScrollEvents = true
element2.scrollTop(element1.scrollTop())
})
}
syncScroll($("#div1"), $("#div2"))
syncScroll($("#div2"), $("#div1"))
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div id="div1" style="float:left;overflow:auto;height:100px;width:200px;">
<p>lulz</p>
<p>lulz</p>
<p>lulz</p>
<p>lulz</p>
</div>
<div id="div2" style="float:right;overflow:auto;height:100px;width:200px;">
<p>lulz</p>
<p>lulz</p>
<p>lulz</p>
<p>lulz</p>
</div>
不,滚动条放置在您较小的 div 中。这些滚动条被锁定在 div 的底部,因此无法使用。
您可以做的是在您的大 div下制作两个 javascript 滚动条并完全禁用默认滚动条。然后你的滚动条总是可见的。如果您想加倍努力,这还允许您耦合滚动条,以便左右窗口滚动到相同的位置,以便更好地进行比较。