admin管理员组文章数量:1323330
I have an odd situation. Look at this image:
I have that ruler along the top. I don't want it to scroll off when I scroll the content vertically, so I put it outside the scrolling container. But now it doesn't scroll horizontally either. I need to scroll that horizontally in sync with the content container's scrollbar when the content is scrolled.
How can I acplish this?
I have an odd situation. Look at this image:
I have that ruler along the top. I don't want it to scroll off when I scroll the content vertically, so I put it outside the scrolling container. But now it doesn't scroll horizontally either. I need to scroll that horizontally in sync with the content container's scrollbar when the content is scrolled.
How can I acplish this?
Share asked Apr 8, 2016 at 17:55 nmb1106nmb1106 3851 gold badge6 silver badges20 bronze badges 1- 1 Please show your ("minimal reproducible example") HTML, CSS and JavaScript in order that we can reproduce your problem and so provide useful answers, rather than guesses apropos of nothing. It might also be worth reading through the "How to Ask" guidance, to refresh yourself on what we expect of a question here on Stack Overflow. – David Thomas Commented Apr 8, 2016 at 17:57
1 Answer
Reset to default 9This plain javascript function picks up the .scrollLeft
value of the #content
and reproduces it on the #ruler
's .scrollLeft
jsfiddle
document.getElementById("content").addEventListener("scroll", myFunction);
function myFunction() {
var elmnt = document.getElementById("content");
var elmnt2 = document.getElementById("ruler");
elmnt2.scrollLeft = elmnt.scrollLeft;
}
#ruler {
background: skyblue;
overflow: hidden;
width: 100%;
}
#content {
height: 100px;
overflow: scroll;
background: plum;
}
<div id=ruler>1..2..3..4..5..6..7..8..9..0..1..2..3..4..5..6..7..8..9..0..1..2..3..4..5..6..7..8..9..0..1..2..3..4..5..6..7..8..9..0..1..2..3..4..5..6..7..8..9..0..1..2..3..4..5..6..7..8..9..0..1..2..3..4..5</div>
<div id=content>
<p>texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</p>
<p>texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</p>
<p>texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</p>
<p>texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</p>
</div>
本文标签: javascriptDynamically scroll another element when another scrollsStack Overflow
版权声明:本文标题:javascript - Dynamically scroll another element when another scrolls - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742139125a2422501.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论