js实现自定义滚动条

最新推荐文章于 2021-03-01 22:21:10 发布

VIP文章 rainbow_m

最新推荐文章于 2021-03-01 22:21:10 发布

阅读量526

点赞数

分类专栏： My work notes

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

版权

效果图：

实现小案例代码如下：（一个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
复制链接

扫一扫