距离上次更新已经过了 1089 文中部分内容可能已经过时,如有疑问,请在下方留言。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57
| <!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { height: 3000px; } #box { width: 100px; height: 100px; background-color: #bfa; /* 开启box的绝对定位 */ position: absolute; } </style> <script> window.onload = function() { // 获取box元素 var box = document.getElementById("box");
// 为window绑定鼠标事件 document.onmousemove = function(event) { // 解决兼容性问题 event = event || window.event; //获取滚动条滚动的距离 //chromer认为浏览器的滚动条是body的,可以通过Body.scrollTop来获取 // 火狐等浏览器认为浏览器的滚动条是html的 // 所以我们就提前进行一个判断 var st = document.body.scrollTop || document.documentElement.scrollTop; var sl = document.body.scrollLeft || document.documentElement.scrollLeft;
//获取鼠标的位置 var top = event.clientY; var left = event.clientX;
//设置偏移量 box.style.top = top + st + "px"; box.style.left = left + sl + "px"; } } </script> </head>
<body> <div id="box">
</div>
</body>
</html>
|
为什么要获取滚动条长度:如下

在这里插入图片描述
愿你的坚持终有收获。