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;
    }

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

1 个答案: