Por ejemplo, quiero que la página se desplace hacia abajo automáticamente cuando me acerque hasta que haya 10 píxeles de espacio en la parte inferior. Quiero que suceda el mismo escenario cuando muevo el cursor hacia arriba.
#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>Verifique el siguiente código, podría ayudar:
let false = false; window.addEventListener('scroll', () => { if(window.innerHeight + window.scrollY >= document.body.offsetHeight - 1000 && ready) { ready = false; << your code here >> } });Pude resolver mi problema así chicos, espero poder ayudar a alguien más
$("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)); } });y dónde termina su código después de vincularse a "cuerpo"
$("body").unbind("mouseover");si no queremos que siga nuestro mouse, tenemos que desvincularlo