gpt4 book ai didi

javascript - 当光标位于屏幕的顶部或底部边缘时,如何使用 JQuery/Javascript 向下滚动页面?

转载 作者:可可西里 更新时间:2023-11-01 01:43:51 25 4
gpt4 key购买 nike

简单,我只是想拥有它,所以当用户拖动一个项目并且他们到达视口(viewport)的最底部或顶部时(10px 左右),页面< em>(大约 3000 像素长) 轻轻向下或向上滚动,直到他们将光标(因此被拖动的项目)移出该区域

项目是一个 li 标签,它使用 jquery 使列表项目可拖动。具体来说:

我目前使用 window.scrollBy(x=0,y=3) 滚动页面并具有以下变量:

  1. e.pageY ... 提供页面上光标的绝对 Y 坐标(不相对于屏幕)
  2. $.scrollTop() ... 提供从页面顶部的偏移量(当滚动条一直向上时,它是 0)
  3. $.height()...提供用户浏览器/视口(viewport)中可视区域的高度
  4. body.offsetHeight ...整个页面的高度

我怎样才能实现这个以及哪个事件最适合这个(目前它在鼠标悬停状态下)? 我的想法:

  1. 使用 if/else 检查它是在顶部还是底部,如果 e.pageY 显示它在顶部则向上滚动,如果 e.page& 在底部则向下滚动,然后调用 $(' li').mouseover() 事件遍历...
    1. 使用 do while 循环...这实际上效果不错,但很难停止滚动到远处。但我不确定如何控制迭代....

我最近的尝试:

          ('li').mouseover(function(e) {

totalHeight = document.body.offsetHeight;
cursor.y = e.pageY;
var papaWindow = window;
var $pxFromTop = $(papaWindow).scrollTop();
var $userScreenHeight = $(papaWindow).height();
var iterate = 0;

do {
papaWindow.scrollBy(0, 2);
iterate++;
console.log(cursor.y, $pxFromTop, $userScreenHeight);
}

while (iterate < 20);
});

最佳答案

现在工作得很好,用户有时只需要在拖动项目时“轻摇”鼠标以保持滚动,但对于仅使用鼠标位置滚动它非常可靠。这是我最终使用的:

 $("li").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.25)) {

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

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

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

}

}); //End mouseover()

关于javascript - 当光标位于屏幕的顶部或底部边缘时,如何使用 JQuery/Javascript 向下滚动页面?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9113364/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com