当前位置：文江博客话题详情

同时滚动 2 个不同的元素

发布于 2024-11-30 00:50:47 字数 181 浏览 1 评论 0原文

如果我有一个 textarea 元素和一个 div 元素，我怎样才能同时滚动它们呢？（当我滚动 textarea 时，我希望 div 执行相同的操作）

我想使用纯 JavaScript，尽可能简单的代码。

泰。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

救赎№ 2024-12-07 00:50:47

正如此处回答的：同步多个选择框中的两个滚动条

var s1 = document.getElementById('Select1');
var s2 = document.getElementById('Select2');

function select_scroll_1(e) { s2.scrollTop = s1.scrollTop; }
function select_scroll_2(e) { s1.scrollTop = s2.scrollTop; }

s1.addEventListener('scroll', select_scroll_1, false);
s2.addEventListener('scroll', select_scroll_2, false);

As answered here: synchronize two scrolling bars in multiple selection box

var s1 = document.getElementById('Select1');
var s2 = document.getElementById('Select2');

function select_scroll_1(e) { s2.scrollTop = s1.scrollTop; }
function select_scroll_2(e) { s1.scrollTop = s2.scrollTop; }

s1.addEventListener('scroll', select_scroll_1, false);
s2.addEventListener('scroll', select_scroll_2, false);

回复收藏 0 原文

妳是的陽光 2024-12-07 00:50:47

虽然问题询问的是如何在纯 JavaScript 中执行此操作，但如果您想使用 jQuery 执行此操作，您所需要做的就是将一个元素的 scrollTop 属性绑定到 scrollTop另一个，使用与滚动事件相关的函数。

大致如下：

$('.linked').scroll(function(){
    $('.linked').scrollTop($(this).scrollTop());    
})

使用该功能，只要您使用其中一个元素的滚动条，所有具有 linked 类的元素都会滚动。（我假设垂直滚动，如果您想要水平滚动，请执行相同的操作，但使用 scrollLeft。）

请参阅 http://jsfiddle.net/g8Krz/ 查看上述内容的工作示例。

While the question asked about doing it in pure JavaScript, if you want to do this with jQuery, all you need to do is tie the scrollTop property of one element to the scrollTop of the other, using a function tied to the scroll event.

Something along the lines of:

$('.linked').scroll(function(){
    $('.linked').scrollTop($(this).scrollTop());    
})

With that function, all elements with a class of linked will scroll whenever you use the scrollbars of one of them. (I assumed vertical scrolling, if you wanted horizontal, do the same but with scrollLeft.)

See http://jsfiddle.net/g8Krz/ for a working example of the above.

回复收藏 0 原文

~没有更多了~