在div中向上和向下滚动

Question

I have this div box here overflow:auto and I want to use to programmatically scroll to top and bottom.

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

This method works for scrolling down.

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

But is there a way to write the code into something like below to check if the scrollHeight is equals to clientHeight? This code below does not work and has no errors.

    //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

You're using scrollTo() . I assume you have a reference to this library? ( http://lions-mark.com/jquery/scrollTo/ ) however, I don't think you need it in this case. You said you wanted to scroll the div, but you're targeting the window (window.scrollTo()). Don't you want to be targeting your div?

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

---

Update

To actually show you something, I've created a jsfiddle: https://jsfiddle.net/4fLyz57q/

When you actually load it up the first time you will get some alerts and nothing will show on the screen. So after it's loaded and shown the alerts, click the Run button. The alerts are only there to show you that the div is infact scrolling.

I've added a div to your ul to act as content so I can push it down. I've also set a height on the ul to it will be scrollable.

Hopefully this will help. I'm sure you won't have too much trouble converting it to what you actually need with the 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++;
}

I've also commented out / removed server code from this and applied them to the js, again, just to get something working.

Your check variable has been removed. It didn't need to be there as the while loop condition is checking the scroll height is greater than the inner height.

However, as with your example code, this won't capture a screenshot at all if the condition is not met.