JavaScript - 使窗口滾動條跟隨鼠標

Question

如何讓窗口滾動條的Y座標與鼠標Y座標相同，我可以如何讓滾動條跟隨鼠標？

Answer 1

這裏是一個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 2

分享我的修改版本尼羅河的答覆來獲取滾動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; 

謝謝尼羅河開始！

Answer 3

最高效的計算使用這樣利用DOM-L3的方式：

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

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