<html>
<head>
<style>
.box {
width: 400px;
height: 50px;
white-space:nowrap;
overflow:auto;
border:1px solid red;
}
.box::-webkit-scrollbar{display:none;}
.item {
height: 50px;
display:inline-block;
width:50px;
border: 1px solid blue;
}
</style>
</head>
<body>
<div class="box" id="box">
<span class="item">11</span>
<span class="item">11</span>
<span class="item">11</span>
<span class="item">11</span>
<span class="item">11</span>
<span class="item">11</span>
<span class="item">11</span>
<span class="item">11</span>
<span class="item">11</span>
<span class="item">11</span>
<span class="item">11</span>
<span class="item">11</span>
<span class="item">11</span>
<span class="item">11</span>
<span class="item">11</span>
<span class="item">11</span>
<span class="item">11</span>
<span class="item">11</span>
<span class="item">11</span>
<span class="item">11</span>
</div>
<script type='application/javascript'>
// 使用类名获取的时候需要进行遍历 类名获取的是DOM中的数组 ID获取的是唯一一个DOM
var entry = document.getElementById('box');
function myBrowser() {
// var userAgent = navigator.userAgent.toLowerCase(); //取得浏览器的userAgent字符串
var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
var isOpera = userAgent.indexOf("Opera") > -1;
if (isOpera) { //判断是否Opera浏览器
return "Opera"
}
;
if (userAgent.indexOf("Firefox") > -1) { //判断是否Firefox浏览器
return "FF";
}
;
if (userAgent.indexOf("Chrome") > -1) {
return "Chrome";
}
;
if (userAgent.indexOf("Safari") > -1) { //判断是否Safari浏览器
return "Safari";
}
;
// if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) { //判断是否IE浏览器
return "IE";
// }
// ;
}
var myWindow = myBrowser()
// 这里进行遍历
if (myWindow === 'Chrome' ||myWindow === 'FF'|| myWindow === 'Opera' || myWindow === 'Safari') {
// 每个DOM对象
entry.onwheel = function(event){
event.preventDefault();
var step = 50;
if(event.deltaY < 0){
this.scrollLeft -= step;
} else {
this.scrollLeft += step;
}
}
}
else {
entry.onmousewheel = function(WheelEvent){
WheelEvent.preventDefault();
var step = 50;
if(WheelEvent.wheelDelta < 0){
this.scrollLeft -= step;
} else {
console.log(WheelEvent.wheelDelta)
this.scrollLeft += step;
}
}
}
</script>
</body>
</html>
滚轮滑动实现左右移动
最新推荐文章于 2024-05-11 11:24:23 发布