javascript - 在div中上下滚动

我在这里有这个div框overflow: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++;
        }
    }

最佳答案

您正在使用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循环条件是检查滚动高度是否大于内部高度。

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