Javascript自定义滚动条

最新推荐文章于 2022-03-29 20:42:18 发布

喝啤酒的猫

最新推荐文章于 2022-03-29 20:42:18 发布

阅读量241

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/qq_38763173/article/details/104326820

版权

本文介绍了如何使用JavaScript实现自定义滚动条，包括基本布局，如何处理内容拖拽以保持比例，以及为滚动条添加滚轮事件，确保用户体验的一致性和美观性。

摘要由CSDN通过智能技术生成

一、基本布局

页面的最外层是document,紧接着是初始包含块 html body，其次是我们的元素
我们禁止了系统的滚动条，（因为各大浏览器的系统滚动条风格不一，有可能会影响我们的页面布局，难看）
body当中我们一般会有最外的一个盒子模拟body区域，在这个盒子的右侧会定位一个盒子模拟滚动条

css：

 html,body{
   
      height:100%;
      overflow: hidden;    // 禁止系统滚动条
    }
 .wrap{
                      // 模拟body区域
   width:100%;
   height:100%;
   position:relative;
   overflow: hidden;
 }

Html：

<div class = "wrap">
    <div class = "content"></div>

    <div class = "scrollBar">
      <div class = "scrollIn"></div>
    </div>
  </div>
 }

JS：

window.onload = function(){
   
	var scrollIn = document.querySelector('#wrap .scrollBar .scrollIn');
	var content = document.querySelector('#wrap .content');
	
	for(var i = 0; i < 200; i++){
   					
		content.innerHTML = content.innerHTML + i + '<br>';
	}	
	
	scrollIn.onmousedown = function(event){
   
		event = event || window.