原生js仿浏览器滚动条效果
作者：chang红达 时间：2024-04-10 16:09:33
效果图：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>仿浏览器滚动条</title>
<style type="text/css">
*{margin: 0;padding: 0;}
#demo{width: 300px;height: 500px;border: 1px solid red;margin:100px;position:relative;overflow:hidden;}
p{padding:5px 20px 5px 5px;font-size:26px;position:relative;}
#scrll{width:18px;border-radius:18px;position:absolute;top:0;right:0;background:red;cursor:pointer;}
</style>
</head>
<body>
<div id="demo">
<p id="dp">我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容</p>
<div id="scrll"></div>
</div>
</body>
<script type="text/javascript">
(function(window){
function $(id){
return document.getElementById(id);
};
// 获取对象
var dp = $("dp"),demo = $("demo"),scrll = $("scrll");
// 获取dp的长度
var dpHeight = dp.offsetHeight;
// 获取demo的长度
var demoHeight = demo.offsetHeight;
// 根据比值计算scrll的长度
var scrllHeight = demoHeight * demoHeight / dpHeight ;
// 如果内容长度小于窗口长度，则滚动条不显示
if( dp.offsetHeight < demo.offsetHeight){
scrllHeight = 0;
};
scrll.style.height = scrllHeight + "px";
// 获取滚动条和内容移动距离的比例
var bilu = ( dp.offsetHeight - demo.offsetHeight ) / (demo.offsetHeight - scrll.offsetHeight);
// 滚动条滚动事件
scrll.onmousedown = function(event){
// event兼容性解决
// console.log(demo.offsetTop)
var event = event || window.event;
// 获取鼠标按下的页面坐标
// 滚动条滚动时只有top值改变，所有不需要获取pageX
var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
// 获取鼠标在scrll内的坐标
var scrllY = pageY - demo.offsetTop - scrll.offsetTop;
// 给document绑定鼠标移动事件
document.onmousemove = function(event){
var event = event || window.event;
// 获取鼠标移动时的坐标
var moveY = event.pageY || event.clientY + document.documentElement.scrollTop;
// 获取滚动条的移动坐标
var trueY = moveY - scrllY - demo.offsetTop ;
// 限制滚动条移动的范围
if( trueY < 0 ){
trueY = 0 ;
};
if( trueY > demo.offsetHeight - scrll.offsetHeight ){
trueY = demo.offsetHeight - scrll.offsetHeight;
};
scrll.style.top = trueY + "px";
//清除选中文字
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
// 获取文字区域移动的距离
var dpY = trueY * bilu ;
dp.style.top = - dpY + "px";
}
};
// 鼠标抬起清除鼠标移动事件
document.onmouseup = function(){
document.onmousemove = null;
}
})(window)
</script>
</html>
来源：http://www.qdfuns.com/notes/38951/b7b68de899a5c4606a4a064b6af3e2ef.html
标签：js,滚动条
0
投稿猜你喜欢
Django生成数据库及添加用户报错解决方案
2024-01-28 22:40:00
js将table的每个td的内容自动赋值给其title属性的方法
2023-08-07 18:34:54
刷新页面的几种方法小结(JS,ASP.NET)
2024-05-28 15:37:33
python报错TypeError: ‘NoneType‘ object is not subscriptable的解决方法
2023-01-11 08:11:07
发工资啦！教你用Python实现邮箱自动群发工资条
2023-10-12 19:11:17
SQL Server查找表名或列名中包含空格的表和列实例代码
2024-01-17 03:15:33
Python编程实现凯撒密码加密示例
2021-04-22 01:58:56
Python动态声明变量赋值代码实例
2023-11-15 03:30:47
扩展数据库系统选项实现更高的可扩展性
2009-01-06 11:14:00
基于Python编写一个宝石消消乐小游戏
2021-10-25 05:46:06
用Python编写一个简单的CS架构后门的方法
2021-08-07 00:15:58
两个百度WEB面试题 怎么做？
2010-09-03 18:40:00
Oracle 分析函数RANK(),ROW_NUMBER(),LAG()等的使用方法
2009-11-05 21:45:00
python+excel接口自动化获取token并作为请求参数进行传参操作
2022-05-19 04:10:18
php session 预定义数组
2023-11-15 01:15:22
python使用 request 发送表单数据操作示例
2022-08-06 07:31:07
Go语言对字符串进行MD5加密的方法
2024-05-09 14:54:38
Go语言Zap日志库使用教程
2024-05-05 09:27:11
从mysql到oracle你必须了解的50件事儿
2010-08-05 14:36:00
Django框架设置cookies与获取cookies操作详解
2021-07-24 09:10:49
