如何在网页内滚动溢出的 div

Question

有没有办法在网页中滚动 div 的滚动条？更准确地说，我正在尝试自动滚动 Instagram 帖子的上下滚动，例如 https://instagram.com/p/9D5Ir3CY3D/?taken-by=bentomonsters。但是，由于滚动条可能使用 CSS 属性隐藏，我可能无法检测到它，因为滚动条不是元素。

下面是滚动条的 css 样式（来自 firebug）。

.-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;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, 
blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, 
img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, 
center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, 
tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, 
figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, 
time, mark, audio, video {
    border: 0 none;
    font: inherit;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}

我尝试过诸如

之类的方法

WebElement commentscroll = dr.findElement(By.className("commentsSidebarVariant"));

jse.executeScript("return arguments[0].scrollTop;", commentscroll);

jse.executeScript("$(\"#commentsSidebarVariant\").animate({ scrollTop: \"100px\" })");  

jse.executeScript("arguments[0].scrollTop = arguments[1];", commentscroll);

WebElement commentscroll = dr.findElement(By.cssSelector(".-cx-PRIVATE-PostInfo__commentsSidebarVariant"));               

jse.executeScript("arguments[0].scrollTop;", commentscroll);

它们都不起作用，因为滚动条甚至没有移动。

Answer 1

我使用以下方法使用纯 JS 滚动溢出元素并检查是否达到滚动结束。 当到达滚动结束时，您需要使用类似的方法向上滚动，因为您可能已经从任何位置开始滚动。

以下方法为参考代码，并非全部解决方案：

    // Returns true if scroll succeeded, false otherwise
    private boolean scrollDownOverflowElement(WebElement element, int lazyLoadingGracePeriodMillis) {
        long scrollTopBefore = (long) javascriptExecutor.executeScript("return arguments[0].scrollTop", element);
        javascriptExecutor.executeScript("arguments[0].scrollTop = arguments[0].scrollTop + arguments[0].clientHeight", element);
        if (isAtEndOfScroll(element)) {
            // Wait for 1 second to give additional async results a chance to load (e.g. select2 drop downs)
            sleep(lazyLoadingGracePeriodMillis);
        }
        long scrollTopAfter = (long) javascriptExecutor.executeScript("return arguments[0].scrollTop", element);
        return scrollTopAfter != scrollTopBefore;
    }


    // Returns true if element is at end of scroll, false otherwise
    // See https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollHeight
    private boolean isAtEndOfScroll(WebElement element) {
        // scrollTop is the number of number of pixels scrolled down from the top (0 when scrolled all the way up)
        // scrollHeight is the height of the scroll view of an element. It includes the element padding but not its margin.
        // clientHeight is the inner height of an element in pixels, including padding but not the horizontal scrollbar height, border, or margin. (the displayed size of an overflow element)
        final boolean isAtEnd = (boolean) javascriptExecutor.executeScript("return arguments[0].scrollHeight - arguments[0].scrollTop === arguments[0].clientHeight", element);
        return isAtEnd;
    }