Question

如何使窗口滚动条的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

分享我修改后的版本尼罗河的回复以获得一个滚动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;

谢谢Nile的开始！

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

3 个答案: