基本上,功能在这里,它只需要一些我不知道如何调整的细化,我写了这个小片段,它完全符合我的要求,但不会滚动整个页面,它只是滚动“窗口”大小。
任何人都可以接受这个并让它变得惊人吗? :)
$(document).mousemove(function(e){
percent = ((e.pageY) * 100) / $(this).height();
$('body,html').scrollTop( percent);
});
答案 0 :(得分:7)
类似的东西? http://jsfiddle.net/zcVL7/4/
我将JS简化了一点,但你已经掌握了大部分内容:
$(document).mousemove(function(e) {
var percent = e.clientY / $(window).height();
$('body, html').scrollTop($(document).height() * percent);
});
答案 1 :(得分:5)
您可能希望根据鼠标相对于页面中间偏移的距离来确定增量:http://jsfiddle.net/BYUdS/2/。这样,你可以继续向下滚动,这样就没有滚动限制(你现在拥有的)。
$(document).mousemove(function(e) {
$("html, body").scrollTop(function(i, v) {
var h = $(window).height();
var y = e.clientY - h / 2;
return v + y * 0.1;
});
});
这是一个更顺畅的版本:http://jsfiddle.net/BYUdS/3/。
var $elems = $("html, body");
var delta = 0;
$(document).on("mousemove", function(e) {
var h = $(window).height();
var y = e.clientY - h / 2;
delta = y * 0.1;
});
$(window).on("blur mouseleave", function() {
delta = 0;
});
(function f() {
if(delta) {
$elems.scrollTop(function(i, v) {
return v + delta;
});
}
webkitRequestAnimationFrame(f);
})();