/** Scroll sync between editor and preview **/
// Locks so that only one pane is in control of scroll sync
var eScroll = false;
var pScroll = false;
// Set the listener to scroll
this.edit.on('scroll', function() {
if(eScroll) { // Lock the editor pane
eScroll = false;
return;
}
pScroll = true; // Enable the preview scroll
// Set elements to variables
let current = self.edit.get(0);
let other = self.preview.get(0);
// Calculate the position of scroll position based on percentage
let percentage = current.scrollTop / (current.scrollHeight - current.offsetHeight);
// Set the scroll position on the other pane
other.scrollTop = percentage * (other.scrollHeight - other.offsetHeight);
});
this.preview.on('scroll', function() {
if(pScroll) { // Lock the preview pane
pScroll = false;
return;
}
eScroll = true; // Enable the editor scroll
// Set elements to variables
let current = self.preview.get(0);
let other = self.edit.get(0);
// Calculate the position of scroll position based on percentage
let percentage = current.scrollTop / (current.scrollHeight - current.offsetHeight);
// Set the scroll position on the other pane
other.scrollTop = percentage * (other.scrollHeight - other.offsetHeight);
});
<div id="left" class="container leftContainer">
Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur? At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
</div>
<div id="right" class="container rightContainer">
Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur? At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
</div>
function scrollSync(selector) {
let active = null;
document.querySelectorAll(selector).forEach(function(element) {
element.addEventListener("mouseenter", function(e) {
active = e.target;
});
element.addEventListener("scroll", function(e) {
if (e.target !== active) return;
document.querySelectorAll(selector).forEach(function(target) {
if (active === target) return;
target.scrollTop = active.scrollTop;
target.scrollLeft = active.scrollLeft;
});
});
});
}
//RWM: Call the function on the elements you need synced.
scrollSync(".scrollSync");
8条答案
按热度按时间uubf1zoe1#
感谢上面的答案,我做了一个混合的解决方案,优先为我工作:
lrl1mhuk2#
我注意到他的问题很老了,但我想我可以留下一个比使用计时器更好的jQuery实现。在这里,我使用了两个事件侦听器,就像以前使用的解决方案一样,但是,这将使用比例/百分比来同步两个不同大小的div框的滚动条。2你可以将同样的知识应用到Vanilla JS解决方案中来获得滚动条的位置。这将使两个div之间的滚动更加平滑。
im9ewurl3#
我添加了两个DOM操作函数
flvlnr444#
这里我们使用
.scrollTop()
,从带有滚动条的元素中获取scrollTop
值,并为其他元素设置scrollTop
以同步它们的滚动位置:http://api.jquery.com/scrollTop这里假设底部元素的ID为
bottom
,顶部元素的ID为top
。您可以使用CSS隐藏
top
元素的滚动条:下面是一个演示:http://jsfiddle.net/sgcer/1884/
我想我从来没有真正的理由这样做,但它看起来很酷的行动。
ubof19bj5#
我知道这是一个老帖子,但也许这会对某些人有帮助。如果你需要同步双向滚动,仅仅处理两个容器的滚动事件并设置滚动值是不够的,因为滚动事件会进入循环,滚动不平滑(尝试通过鼠标滚轮垂直滚动,Hightom给出了一个例子)。
以下是如何检查是否已同步滚动的示例:
这是fiddle。
7vhp5slm6#
好了,我评估了这里提供的所有选项,它们都有这样或那样的限制:
我利用它创建了一个可重用的版本,它可以处理无限数量的元素,并且不需要JQuery。
你可以在这里查看JSFiddle:http://jsfiddle.net/gLa2ndur/3。您可以看到它同时使用了水平和垂直滚动示例。
唯一已知的限制是,它可能无法在不同大小的div上工作。我相信如果你的用例认为有必要(我的用例没有),有人可以将Andrew's work合并到其中。
希望这对某人有帮助!
velaa5lx7#
我一直在寻找一个双向的解决方案,感谢你们所有人,你们的贡献帮助我做到了这一点:
参见JSFiddle:https://jsfiddle.net/sgcer/1274/
希望有一天能帮助到别人:-)
tjjdgumg8#
另一个解决方案可以防止这种循环问题,并实现平滑的滚动。这可以确保只有被聚焦的元素获得滚动事件。