繁体   English   中英

使用溢出-x在div中设置x滚动位置的纯javascript方法

[英]pure javascript method to set x scroll position in a div with overflow-x

如何使用纯javascript或angularjs设置带有水平/溢出-x的div滚动的x位置? 重要提示:我不是在寻找 jquery 解决方案 - 使用 angularjs,jquery 不会立即工作。

angularjs 中的 $anchorScroll() 滚​​动到垂直位置但不会滚动到水平位置 afaik。 $window.scroll to 或 window.scrollTo(x,y) 不会在 overflow-x div 内滚动。 如果这里有人确定我尝试过的方法可以在某些修改下工作,我也想知道。

您可以使用$(selector).scrollLeft(amountToMove); 在 jQuery 上

document.getElementById(containerId).scrollLeft = amountToMove; 使用纯 javascript 或

angular.element(selector).scrollLeft(amountToMove); 使用 angularjs。

我偶然发现了这个问题,我正在寻找解决此问题的跨浏览器解决方案!
我发现元素上的 scrollBy 仅适用于 Firefox!
我知道这是一个老问题,但也许有人也像我一样寻找这个......
假设 div id 是 scroll :

 function ScrollByLeft() { document.getElementById("scroll").scrollBy(10, 0); } function ScrollByRight() { document.getElementById("scroll").scrollBy(-10, 0); } function ScrollLeft() { document.getElementById("scroll").scrollLeft=10; } function ScrollRight() { document.getElementById("scroll").scrollLeft=-10; }
 div#scroll { width: 180px; overflow-x: scroll; }
 <div id="scroll"> <p> Scroll.strange.wery.long.word.horizontally.for.10.pixels.left.and.right.also.but.only.on.Firefox.as.I.know</p> </div> <button onclick="ScrollByLeft()">ScrollBy Left!</button> <button onclick="ScrollByRight()">ScrollBy Right!</button> <br> <button onclick="ScrollLeft()">ScrollLeft Left!</button> <button onclick="ScrollRight()">ScrollLeft Right!</button>

局限性:
据我所知,ScrollBy 仅适用于 Firefox...
其他浏览器只能这样滚动窗口!
不是其他元素...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM