javascript - JavaScript - 使窗口滚动条跟随鼠标

Question

如何使windows滚动条的Y坐标与鼠标Y坐标相同，如何使滚动条跟随鼠标？

Answer 1

使用 DOM-L3 执行此操作的最高效的使用方式：

//HTML BLOCK
<canvas onmousemove="TrackMouse(event)"></canvas>

//JS BLOCK
function TrackMouse(e){
        window.scrollBy(e.webkitMovementX, e.webkitMovementY);
}

Answer 2

这是一个无 jQuery 的解决方案：

var height = document.documentElement.scrollHeight;

function scroll(event){
    var y = event.clientY;
    var yPercentage = y/screen.height;
    window.scrollTo(0,yPercentage*height);
}

window.onmousemove = scroll;

在行动：http: //jsfiddle.net/xF2vs/3/

在真实页面上，如果您的鼠标位于屏幕底部，页面将完全滚动到底部。出于某种原因，在 jsfiddle 中它并没有完全成功。

它所做的是找出鼠标在屏幕上的距离并将文档向下滚动相同的百分比。

Answer 3

分享我修改后的版本 Nile 的回复，以获得同时滚动 X 和 Y 的版本。

var height = document.documentElement.scrollHeight;
var width = document.documentElement.scrollWidth;

function scroll(event) {
    var y = event.clientY;
    var x = event.clientX;
    var yPercentage = y / screen.height;
    var xPercentage = x / screen.width;
    window.scrollTo(xPercentage * width, yPercentage * height);
}

window.onmousemove = scroll;

要只滚动宽度，而不是高度（正如 Murplyx 一年前要求的那样），请使用以下命令：

var width = document.documentElement.scrollWidth;

function scroll(event) {
    var x = event.clientX;
    var xPercentage = x / screen.width;
    window.scrollTo(xPercentage * width, 0);
}

window.onmousemove = scroll;

谢谢尼罗河的开始！