Question

我试图在div上水平滚动，但遗憾的是无法做到

下面是div弹出窗口 -

这是HTML -

<div id="mCSB_4_scrollbar_horizontal" class="mCSB_scrollTools mCSB_4_scrollbar mCS-dark-thin mCSB_scrollTools_horizontal" style="display: block;">
   <div class="mCSB_draggerContainer">
     <div id="mCSB_4_dragger_horizontal" class="mCSB_dragger" style="position: absolute; min-width: 552px; width: 552px; left: 0px; display: block; max-width: 793px;" oncontextmenu="return false;">
       <div class="mCSB_dragger_bar"></div>
     </div>
     <div class="mCSB_draggerRail"></div>
   </div>
</div>

我正在尝试使用JavascriptExecuter但不能正常工作

    WebElement scroll = driver.findElement(By.id("mCSB_4_dragger_horizontal"));
    JavascriptExecutor js = (JavascriptExecutor)driver; 
    js.executeScript("arguments[0].scrollIntoView()", scroll);

Answer 1

试试这个：

js.executeScript("arguments[0].scrollIntoView(true);", scroll);

Answer 2

另一种方法是使用

js.executeScript("arguments[0].scrollTo()", scroll);

这应该允许向右滚动到指定的元素

Answer 3

如果希望更好地控制布局，可以使用overflow属性。默认值是可见的。

HTML code：

<div class="scroll">
    You can use the overflow property when you want to have better control of the layout. The default value is visible.
</div>

CSS代码：

div.scroll{
    background-color:#00FFFF;
    height:40px; 
    overflowx:scroll; 
    white-space: nowrap;
}

通过使用上面的CSS属性（overflow-x: scroll;），您可以水平滚动。

Answer 4

所有发布的选项都不适用于我的情况，但最后我找到了一个解决方案

在我的情况下，当我滚动时，<style>属性值从

更改

<div id="mCSB_4_dragger_horizontal" class="mCSB_dragger" style="position: absolute; min-width: 552px; width: 552px; left: 0px; display: block; max-width: 793px;" oncontextmenu="return false;">

到

<div id="mCSB_4_dragger_horizontal" class="mCSB_dragger" style="position: absolute; min-width: 30px; width: 441px; left: 362px; display: block; max-width: 793px;" oncontextmenu="return false;">

这样我所做的就是使用<style>这样设置JavascriptExecuter标记值 -

JavascriptExecutor jse = (JavascriptExecutor) driver;
jse.executeScript("document.getElementById('mCSB_4_dragger_horizontal').setAttribute('style', 'position: absolute; min-width: 30px; width: 441px; left: 362px; display: block; max-width: 793px;')");

及其工作。：）

如何在div上进行水平滚动？

4 个答案: