
下面的代码暂不兼容 Webkit(Chrome, Safari),等我再琢磨一下、、、
Javascript 和 jQuery 方法都写了,你只需要更改变量 scroll_width 的值,就是每次移动的长度。
CSS
html {overflow-y: hidden}HTML
<div style="width: 5000px">test</div>jQuery
$(function() {// 设置每次滚动长度,单位 px
var scroll_width = 100
var scroll_events = "mousewheel DOMMouseScroll MozMousePixelScroll"
$(document).on(scroll_events, function(e) {
var delta = e.originalEvent.wheelDelta || e.originalEvent.detail
// 滑轮向下滚动,滚动条向右移动,scrollleft+
if(delta >0) {
$("html").scrollLeft($("html").scrollLeft() + scroll_width)
}
// 滑轮向上滚动,滚动条向座移动,scrollleft-
else {
$("html").scrollLeft($("html").scrollLeft() - scroll_width)
}
})
})
Javascript
window.onload = function() {// 监听鼠标滑轮
var mousewheelevt = (/Firefox/i.test(navigator.userAgent))
? "DOMMouseScroll" : "mousewheel"
if(document.attachEvent) {
document.attachEvent("on" + mousewheelevt, function(e){
mousewheel_event(e.wheelDelta)
})
}
else if(document.addEventListener) {
document.addEventListener(mousewheelevt, function(e){
mousewheel_event(e.detail)
}, false)
}
// 设置每次滚动长度,单位 px
var scroll_width = 100
function mousewheel_event(delta) {
// 滑轮向下滚动,滚动条向右移动,scrollleft+
if(delta >0) {
document.getElementsByTagName("html")[0].scrollLeft
+= scroll_width
}
// 滑轮向上滚动,滚动条向座移动,scrollleft-
else {
document.getElementsByTagName("html")[0].scrollLeft
-= scroll_width
}
}
}
水平滚动是在一个页面最大化以后横向还是没有办法显示完整的情况下出现的,但是现在显示器在推荐使用的分辨率下是不太会出现这种情况的,你可以试着把窗口不要最大化,或者把分辨率调低,但是显示效果就不能得到保证了欢迎分享,转载请注明来源:内存溢出
微信扫一扫
支付宝扫一扫
评论列表(0条)