正文
jquery滚轮,jq无缝滚动
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
js或jq怎么实现滚轮控制页面上下滑动
jQuery监听鼠标滚轮(滚动)事件
第一步：下载jquery-mousewheel插件
第二步：复制以下代码做测试，打开日志看效果
jQuery(function($) {
$('#nav')
.bind('mousewheel', function(event, delta) {
var dir = delta 0 ? 'Up' : 'Down';
if (dir == 'Up') {
console.log(“向上滚动， ”);
} else {
console.log(“向下滚动， http: //blog.csdn.net/u011627980”);
}
return false;
});
});
}
相关问答
Q1: 为什么jquery没有封装鼠标滚轮事件
jquery本身处理DOM和兼容性体积已经很大了，不可能全部都封装进去了，否则作为一个类库过于臃肿就没有使用的必要了。但是像鼠标滚轮事件jquery是有jquery-mousewheel插件封装了。如果使用可以引用
Q2: jQ中鼠标滚轮事件事件吗
jQuery 不直接支持鼠标滑轮事件，有一个插件叫做 jQuery Mousewheel，你可以 Google 一下
但用原生 JavaScript 也可以轻松来实现
script type="text/javascript"
// 鼠标滑轮滚动后执行的函数
// delta 0 = 向上滚动
// delta 0 = 向下滚动
function mousewheelEvent(e, delta) {
document.getElementById("debug").innerHTML += (delta + "br /");
// 其它代码...
}
if (document.attachEvent) {
document.attachEvent("onmousewheel", function(e) {
mousewheelEvent(e, e.wheelDelta);
});
}
else if (document.addEventListener) {
document.addEventListener("DOMMouseScroll", function(e) {
mousewheelEvent(e, e.detail * -40);
}, false);
}
/script
body style="height: 3000px"
div id="debug" style="position: fixed"/div
Q3: jquery使鼠标滚轮暂时失效
$(document).bind('mousewheel', function(event, delta) { return false; });
绑定滚轮事件，然后返回false就可以。
return true;可以恢复。
根据实际情况运用即可。
Q4: js或jq怎样可以使滚轮滚动固定距离
你好，实现如下，请现在 body 加一定的 br 出现上下滚动条 够长。不懂请追问。
希望采纳！！
script src="" type="text/javascript"/script
script type="text/javascript" src="jquery.mousewheel.min.js"/script
script type="text/javascript"
$('body').on('mousewheel', function(event) {
if(event.deltaY=="-1"){
$('body').animate({scrollTop: 5000})
}else if(event.deltaY=='1'){
console.log('上滑')
}
});
/script
Q5: jquery.nicescroll.min.js滚动条使用方法
(摘自博客园，原网址)
jquery.nicescroll.min.js滚动条使用方法,Nicescroll是制作自定义滚动条的jq插件。支持div,iframe,html等使用,兼容IE7-8,safari,firefox,webkit内核浏览器(chrome,safari)以及智能终端设备浏览器的滚动条。
页面使用：
$("html").niceScroll({
cursorcolor:"#E62020",
cursoropacitymax:1,
touchbehavior:false,
cursorwidth:"10px",
cursorborder:"0",
cursorborderradius:"5px"
})
nicescroll详细参数配置：
cursorcolor - 设置滚动条颜色，默认值是“＃000000”
cursoropacitymin - 滚动条透明度最小值
cursoropacitymax - 滚动条透明度最大值
cursorwidth - 滚动条的宽度像素，默认为5（你可以写“5PX”）
cursorborder - CSS定义边框，默认为“1px solid #FFF”
cursorborderradius - 滚动条的边框圆角
ZIndex的 - 改变滚动条的DIV的z-index值，默认值是9999
scrollspeed - 滚动速度，默认值是60
mousescrollstep - 滚动鼠标滚轮的速度，默认值是40（像素）
touchbehavior - 让滚动条能拖动滚动触摸设备默认为false
hwacceleration - 使用硬件加速滚动支持时，默认为true
boxzoom - 使变焦框的内容，默认为false
dblclickzoom - （仅当boxzoom = TRUE）变焦启动时，双点击框，默认为true
gesturezoom - boxzoom = true并使用触摸设备）变焦（仅当激活时，间距/盒，默认为true
grabcursorenabled“抢”图标，显示div的touchbehavior = true时，默认值是true
autohidemode，如何隐藏滚动条的作品，真正的默认/“光标”=只光标隐藏/ FALSE =不隐藏
的背景下，改变铁路背景的CSS，默认值为“”
iframeautoresize中，AUTORESIZE iframe上的load事件（默认：true）
cursorminheight，设置最低滚动条高度（默认值：20）
preservenativescrolling，您可以用鼠标滚动本地滚动的区域，鼓泡鼠标滚轮事件（默认：true）
railoffset，您可以添加抵消顶部/左轨位置（默认：false）
bouncescroll，使滚动反弹结束时的内容移动（仅硬件ACCELL）（默认：FALSE）
spacebarenabled，允许使用空格键滚动（默认：true）
railpadding，设置间距（默认：顶：0，右：0，左：0，底部：0}）
disableoutline，Chrome浏览器，禁用纲要（橙色hightlight）时，选择一个div nicescroll（默认：true）
