I want the page to scroll down, top automatically when my cursor is near the top or bottom of the page

Question

For example, I want the page to scroll down automatically when I approach until there is 10px of space at the bottom. I want the same scenario to happen when I move the cursor up.

#list-container{
    background-color: rebeccapurple;
    cursor: default;
    overflow-y: auto;
    height: 200px;
    padding: 10px;
}
#list{
    padding: 10px;
    margin: 10px;
}

        <div id="list-container">
            <ol id="list" >
                <li>zero</li>
                <li>one</li>
                <li>two</li>
                <li>three</li>
                <li>four</li>
                <li>five</li>
                <li>six</li>
                <li>seven</li>
                <li>eight</li>
                <li>nine</li>
                <li>ten</li>
                <li>eleven</li>
                <li>twelve</li>
                <li>thirteen</li>
                <li>fourteen</li>
                <li>fifteen</li>
            </ol>
        </div>

Do you want to page should start scrolling after page load? or on mouse scroll? — Master.Deep, Feb 15 '22 at 14:15
after page load if data is long downwards i want it to scroll as i lower my cursor — Cem Özbey, Feb 15 '22 at 15:58

score 0 · Answer 1 · answered Feb 15 '22 at 14:15

0

Check the following code, it might help:

let false = false;

window.addEventListener('scroll', () => {
    if(window.innerHeight + window.scrollY >= document.body.offsetHeight - 1000 && ready)
    {
        ready = false;
        << your code here >>
    }
});

answered Feb 15 '22 at 14:15

i think it didn't work, it didn't make any changes when scrolling up or down. – Cem Özbey Feb 15 '22 at 16:02
$("[data-autoscroll]").autoscroll({ interval: 100 }); And,
I hope it helps.
– Feb 16 '22 at 08:31
This is for auto scrolling down to the bottom. For Scrolling Up and Down you need to apply scrollUp and scrollDown events. – Feb 16 '22 at 08:41
Otherwise, this might help. [link]https://stackoverflow.com/questions/1144805/scroll-to-the-top-of-the-page-using-javascript?rq=1 – Feb 16 '22 at 08:43
thank you these answers helped me to reach the result. – Cem Özbey Feb 16 '22 at 11:14

score 0 · Accepted Answer · answered Feb 15 '22 at 22:32

I was able to solve my problem like this guys, I hope I can help someone else

 $("body").bind("mouseover", function (e) {
        e = e || window.event; var cursor = { y: 0 }; cursor.y = e.pageY; //Cursor YPos
        var papaWindow = parent.window;
        var $pxFromTop = $(papaWindow).scrollTop();
        var $userScreenHeight = $(papaWindow).height();

        if (cursor.y > (($userScreenHeight + $pxFromTop) / 1.15)) {

          if ($pxFromTop < ($userScreenHeight * 3.2)) {

            papaWindow.scrollBy(0, ($userScreenHeight / 30));
          }
        }
        else if (cursor.y < (($userScreenHeight + $pxFromTop) * 0.75)) {

          papaWindow.scrollBy(0, -($userScreenHeight / 30));

        }
      });

and where your code ends after binding to "body"

$("body").unbind("mouseover");

if we don't want it to follow our mouse we have to unbind it

I want the page to scroll down, top automatically when my cursor is near the top or bottom of the page

2 Answers2