html 中鼠标滑轮实现横向滚动

最新推荐文章于 2024-05-16 18:16:14 发布

君君大虾

最新推荐文章于 2024-05-16 18:16:14 发布

阅读量1.5w

点赞数 2

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/wangjun5132/article/details/50325487

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

之前看到一个网页，有鼠标滚轮滚动时实现了横向的滚动效果，觉得有意思，就试了试，本来想挺简单的一个功能，但是兼容各浏览器就要费些功夫了

HTML和CSS代码

<style type="text/css">

		img{
			height:200px;
		}
		#scrollDiv{
			display: inline-block;
			float: left;
			overflow-x: auto;
			white-space:nowrap;
		}		

	</style>

<div  id = "scrollDiv" >					
	<img src="http://img30.360buyimg.com/jr_image/jfs/t1948/155/1535759852/15649/2cba8c4b/56615b6fN6a873846.jpg" class="uploadImg" alt="" id="localfile" > 
	<img src="http://img30.360buyimg.com/jr_image/jfs/t1948/155/1535759852/15649/2cba8c4b/56615b6fN6a873846.jpg" class="uploadImg" alt="" id="localfile" > 
	<img src="http://img30.360buyimg.com/jr_image/jfs/t1948/155/1535759852/15649/2cba8c4b/56615b6fN6a873846.jpg" class="uploadImg" alt="" id="localfile" > 
	<img src="http://img30.360buyimg.com/jr_image/jfs/t1948/155/1535759852/15649/2cba8c4b/56615b6fN6a873846.jpg" class="uploadImg" alt="" id="localfile" > 
	<img src="http://img30.360buyimg.com/jr_image/jfs/t1948/155/1535759852/15649/2cba8c4b/56615b6fN6a873846.jpg" class="uploadImg" alt="" id="localfile" > 
	<img src="http://img30.360buyimg.com/jr_image/jfs/t1948/155/1535759852/15649/2cba8c4b/56615b6fN6a873846.jpg" class="uploadImg" alt="" id="localfile" > 
	<img src="http://img30.360buyimg.com/jr_image/jfs/t1948/155/1535759852/15649/2cba8c4b/56615b6fN6a873846.jpg" class="uploadImg" alt="" id="localfile" > 
	<img src="http://img30.360buyimg.com/jr_image/jfs/t1948/155/1535759852/15649/2cba8c4b/56615b6fN6a873846.jpg" class="uploadImg" alt="" id="localfile" > 
	<img src="http://img30.360buyimg.com/jr_image/jfs/t2089/259/1344864990/31575/e10681a6/56567151N00597360.jpg" class="uploadImg" alt="" id="localfile" >
	<img src="http://img30.360buyimg.com/jr_image/jfs/t2320/340/1246298565/41235/6a164b17/5652bcb7Na9f44ab3.jpg" class="uploadImg" alt="" id="localfile" >  
	</div>

js代码

在chrome 中设置 document.documentElement.scrollLeft 都会为0，但是可以设置 document.body.scrollLeft,因此需要进行浏览器判断，同时在FireFox下，没有mousewheel事件，但是FireFox增加了DOMMouseScroll事件；

var scrollDiv = document.getElementById("scrollDiv");

    var element =  document.documentElement;
    if(navigator.userAgent.indexOf("Chrome")>0){
    	element = document.body;
    }

    document.addEventListener('DOMMouseScroll',handler,false)
    document.addEventListener('mousewheel',handler,false)
    function handler(event){
		var detail = event.wheelDelta || event.detail;
		var moveForwardStep = 1;
		var moveBackStep = -1;
		var step = 0;	
		if(detail > 0){
				step = moveForwardStep*100;
		}else{
			step = moveBackStep * 100;
		}
			
		element.scrollLeft += step;	

	}

document.body 和 document.documentElement的区别

document.body 是DOM对象里的body子节点，即 <body> 标签；

document.documentElement 是整个节点树的根节点root，即<html> 标签；

君君大虾

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
html 中鼠标滑轮实现横向滚动

之前看到一个网页，有鼠标滚轮滚动时实现了横向的滚动效果，觉得有意思，就试了试HTML和CSS代码 img{ height:200px; } #scrollDiv{ display: inline-block; float: left; overflow-x: auto; white-space:nowrap; }
复制链接

扫一扫