js实现自定义滚动条

最新推荐文章于 2023-11-30 10:46:17 发布

rainbow_m

最新推荐文章于 2023-11-30 10:46:17 发布

阅读量541

点赞数

分类专栏： My work notes

本文链接：https://blog.csdn.net/rainbow_m/article/details/47448737

版权

这篇博客展示了如何使用JavaScript实现自定义滚动条的效果。通过创建和调整CSS样式，结合JavaScript事件监听和处理，实现了拖动滚动条以及鼠标滚轮滚动时内容区域的平滑滚动。代码示例详细说明了各个部分的功能，包括创建滚动条元素、调整大小、监听拖动和滚轮事件等。

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

效果图：

实现小案例代码如下：（一个jsp页面即可）

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE html>
<html>
<head>
<title>Insert title here</title>

<style type="text/css">
#mainBox{ width:400px; height:500px; border:1px #bbb solid; position:relative; overflow:hidden; margin:50px auto;}
#content{ height:2500px; position:absolute; left:0; top:0; background:url(http://www.alixixi.cn/skins/GRAY2010/logo3.gif) }
.scrollDiv{ width:18px; position:absolute; top:0; background:#666; border-radius:10px;}
</style>

</head>
<body>
<div id="mainBox">
<div id="content"></div>
</div>

<script type="text/javascript">

var doc=document;
var _wheelData=-1;
var mainBox=doc.getElementById('mainBox');
function bind(obj,type,handler){
var node=typeof obj=="string"?$(obj):obj;
if(node.addEventListener){
node.addEventListener(ty

最低0.47元/天解锁文章

rainbow_m

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js实现自定义滚动条

效果图：实现小案例代码如下：（一个jsp页面即可）pageEncoding="UTF-8"%>Insert title here#mainBox{ width:400px; height:500px; border:1px #bbb solid; position:relative; overflow:hidden; margin:50px
复制链接

扫一扫

专栏目录