ie的横向滚动条要随着鼠标滚轮滑动而移动,但网上找不到jquery或js的方法,纵向滚动条已经被我隐藏了

ie的横向滚动条要随着鼠标滚轮滑动而移动,但网上找不到jquery或js的方法,纵向滚动条已经被我隐藏了,第1张

下面的代码暂不兼容 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

}

}

}

水平滚动是在一个页面最大化以后横向还是没有办法显示完整的情况下出现的,但是现在显示器在推荐使用的分辨率下是不太会出现这种情况的,你可以试着把窗口不要最大化,或者把分辨率调低,但是显示效果就不能得到保证了


欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/bake/11856884.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-05-19
下一篇2023-05-19

发表评论

登录后才能评论

评论列表(0条)

    保存