在div中向上和向下滚动

Question

我有这个div框溢出：auto我想用编程方式滚动到顶部和底部。

<ul class="-cx-PRIVATE-PostInfo__comments -cx-PRIVATE-PostInfo__commentsSidebarVariant" data-reactid=".1.1.0.0.2.1">

//html style
.-cx-PRIVATE-PostInfo__comments {
     margin-left: -24px;
     margin-right: -24px;
     margin-top: -5px;
     padding-left: 24px;
     padding-right: 24px;
     padding-top: 5px;
}
.-cx-PRIVATE-PostInfo__commentsSidebarVariant {
     overflow: auto;
     padding-bottom: 20px;
}
.-cx-PRIVATE-PostInfo__comments {
     flex-grow: 1;
}
ol, ul {
     list-style: outside none none;  
} 

这种方法适用于向下滚动。

jse.executeScript("if ($('.-cx-PRIVATE-PostInfo__comments').scrollTop() != $('.-cx-PRIVATE-PostInfo__comments').outerHeight()) {\n" + 
            "$('.-cx-PRIVATE-PostInfo__comments').animate({scrollTop: $('.-cx-PRIVATE-PostInfo__comments')[0].scrollHeight - $('.-cx-PRIVATE-PostInfo__comments')[0].clientHeight}, 1000);}");

但有没有办法将代码编写成下面的代码来检查scrollHeight是否等于clientHeight？ 下面的代码不起作用，没有错误。

    //return number of pixels the content of <div> element is scrolled vertically
    Long scrollH = (Long)jse.executeScript("return $('.-cx-PRIVATE-PostInfo__comments').scrollTop()");

    //return outer height of a window, including scrollbars
    Long clientH = (Long)jse.executeScript("return $('.-cx-PRIVATE-PostInfo__comments').outerHeight()");

    //check if scrollTop is equals to clientHeight
    Boolean check = (Boolean)jse.executeScript("return $('.-cx-PRIVATE-PostInfo__comments').scrollTop() != $('.-cx-PRIVATE-PostInfo__comments').outerHeight()");

    int index = 1;
    if(check){
        while(scrollH.intValue() > 0){
            screenshot.capture();
            jse.executeScript("window.scrollTo(0," + clientH * index + ")");    
            scrollH  = scrollH - clientH;
            try{
                    Thread.sleep(4000);
            } catch (InterruptedException e){
                Thread.currentThread().interrupt();  //set interrupt flag
            }
            index++;
        }
    }     

Answer 1

你正在使用scrollTo() 。 我假设你有这个库的参考？ （ http://lions-mark.com/jquery/scrollTo/ ）但是，在这种情况下，我认为你不需要它。 你说你想滚动div，但你的目标是窗口（window.scrollTo（））。 你不想成为你的div的目标吗？

$('.-cx-PRIVATE-PostInfo__comments').scrollTop(clientH * index); 

---

更新

为了向你展示一些东西，我创建了一个jsfiddle： https ：//jsfiddle.net/4fLyz57q/

当您第一次实际加载它时，您将收到一些警报，屏幕上不会显示任何内容。 因此，在加载并显示警报后，单击“运行”按钮。 警报仅用于向您显示div实际上是滚动的。

我已经为你的ul添加了一个div作为内容，所以我可以把它推下来。 我还在ul上设置了一个高度，它可以滚动。

希望这会有所帮助。 我相信你不会有太多麻烦将它转换成你真正需要的jse。

var scrollH = $('.-cx-PRIVATE-PostInfo__comments').prop('scrollHeight');
var clientH = $('.-cx-PRIVATE-PostInfo__comments').innerHeight();
var index = 1;

while(scrollH > clientH)
{
    //screenshot.capture();
    $('.-cx-PRIVATE-PostInfo__comments').scrollTop(clientH * index);    
    scrollH  = scrollH - clientH;
    alert(scrollH);
    index++;
}

我还注释掉了/删除了服务器代码并将它们应用到js，再次，只是为了让一些工作。

您的检查变量已被删除。 它不需要在那里，因为while循环条件是检查滚动高度是否大于内部高度。

但是，与示例代码一样，如果不满足条件，则根本不会捕获屏幕截图。