原生js封装自定义滚动条的代码案例分享
本文主要介绍了原生js封装自定义滚动条的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧
最近有一个关于制作在线音乐播放器的项目，需要使用一个滚动条，但是自带滚动条实在是太丑了，所以就自己琢磨了一下自定义的滚动条。
在网上看原理，说实话没怎么看懂，就趁今天上午上安卓的时候，研究了一下，结果还算是满意吧。然后就包装一个对象。
使用方法很简单，就是自定义一个p，将这个对象导入做参数，new一下就可以。也可以自己定义滚动条的样式，只要自己修改一下样式表就可以
效果图：
代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
p{
padding:0px;
box-sizing:border-box;
margin:0px;
border:0px;
}
#p-5{
width: 700px;
height: 500px;
border:1px solid black;
position: relative;
overflow: hidden;
}
.ribbit-OF-p1{
width: 20px;
background-color: rgb(239, 238, 238);
border:1px solid rgba(0,0,0,0.5);
position: absolute;
right:0px;
top: 0px;
cursor:default;
}
.ribbit-OF-p2{
position: absolute;
top:0px;
right: 0px;
width: 100%;
height: 100px;
background-color:rgba(0,0,0,0.3);
border-radius: 10px;
}
.ribbit-OF-p3{
width: 100%;
height:auto;
background-color: lime;
}
</style>
<body>
<p id="p-1">
<p id="p-2">
</p>
</p>
<p id="p-3"><p id="p-4"></p></p>
<p id="p-5">
123123<br/>
qwe<br/>
12asd23<br/>
asd3123<br/>
qwe123<br/>
235423423<br/>
azxc123<br/>
123123<br/>
qwe<br/>
12asd23<br/>
asd3123<br/>
qwe123<br/>
235423423<br/>
azxc123<br/>
123123<br/>
qwe<br/>
12asd23<br/>
asd3123<br/>
qwe123<br/>
235423423<br/>
azxc123<br/>
123123<br/>
qwe<br/>
12asd23<br/>
asd3123<br/>
qwe123<br/>
235423423<br/>
azxc123<br/>
123123<br/>
qwe<br/>
12asd23<br/>
asd3123<br/>
qwe123<br/>
235423423<br/>
azxc123<br/>
123123<br/>
qwe<br/>
12asd23<br/>
asd3123<br/>
qwe123<br/>
235423423<br/>
azxc123<br/>123123<br/>
qwe<br/>
12asd23<br/>
asd3123<br/>
qwe123<br/>
235423423<br/>
azxc123<br/>
123123<br/>
qwe<br/>
12asd23<br/>
asd3123<br/>
qwe123<br/>
235423423<br/>
azxc123<br/>
123123<br/>
qwe<br/>
12asd23<br/>
asd3123<br/>
qwe123<br/>
235423423<br/>
azxc123<br/>
</p>
</body>
<script type="text/javascript">
var p_5 = document.getElementById('p-5');
function OverFlow(element){
this.element = element;
this.ribbit_OF_p1 = document.createElement("p");
this.ribbit_OF_p2 = document.createElement("p");
this.ribbit_OF_p3 = document.createElement("p");
this.createp = function(){
this.ribbit_OF_p1.className = "ribbit-OF-p1";
this.ribbit_OF_p2.className = "ribbit-OF-p2";
this.ribbit_OF_p3.className = "ribbit-OF-p3";
this.ribbit_OF_p3.innerHTML = this.element.innerHTML;
this.element.innerHTML="";
this.element.appendChild(this.ribbit_OF_p3);
this.ribbit_OF_p1.appendChild(this.ribbit_OF_p2);
document.body.appendChild(this.ribbit_OF_p1);
this.ribbit_OF_p1.style.height = getComputedStyle(this.element,null).height;
this.ribbit_OF_p1.style.left = (this.element.offsetLeft+(parseInt(getComputedStyle(this.element,null).width)
-parseInt(getComputedStyle(this.ribbit_OF_p1,null).width)))+"px";
this.ribbit_OF_p1.style.top = this.element.offsetTop+"px";
this.ribbit_OF_p2.style.top = "0px";
}
this.addAudo=function(){
var YY=null;//前鼠标位置
var topXX = 0;//前top位置
var topX = 0;//后top值
var vherght = parseInt(getComputedStyle(this.ribbit_OF_p3,null).height)-parseInt(getComputedStyle(this.element,null).height);//可移动
var dst = 0;
//最大top移动位置
var top_x = parseInt(getComputedStyle(this.ribbit_OF_p1,null).height)-parseInt(getComputedStyle(this.ribbit_OF_p2,null).height);
var thio = this;
window.onmousemove = function(e){
fun(e.clientY);
};
this.ribbit_OF_p2.onmousedown=function(e){
YY = e.clientY;
topXX =parseInt(this.style.top);
return false;
}
window.onmouseup=function(){
YY = null;
return true;
}
function fun(y){
if(top_x>=topX&&topX>=0&&YY!=null){
topX = y-YY+topXX;
if(topX<0)topX=0;
if(topX>top_x)topX=top_x-1;
thio.ribbit_OF_p2.style.top = (topX-1)+"px";
dst = topX*vherght/top_x;
thio.element.scrollTop = dst;
}
}
}
this.createp();
this.addAudo();
}
new OverFlow(p_5);
</script>
</html>以上是原生js封装自定义滚动条的代码案例分享的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
如何在Netflix中快速设置自定义头像
Feb 19, 2024 pm 06:33 PM
Netflix上的头像是你流媒体身份的可视化代表。用户可以超越默认的头像来展示自己的个性。继续阅读这篇文章，了解如何在Netflix应用程序中设置自定义个人资料图片。如何在Netflix中快速设置自定义头像在Netflix中，没有内置功能来设置个人资料图片。不过，您可以通过在浏览器上安装Netflix扩展来实现此目的。首先，在浏览器上安装Netflix扩展的自定义个人资料图片。你可以在Chrome商店买到它。安装扩展后，在浏览器上打开Netflix并登录您的帐户。导航至右上角的个人资料，然后单击
推荐：优秀JS开源人脸检测识别项目
Apr 03, 2024 am 11:55 AM
人脸检测识别技术已经是一个比较成熟且应用广泛的技术。而目前最为广泛的互联网应用语言非JS莫属，在Web前端实现人脸检测识别相比后端的人脸识别有优势也有弱势。优势包括减少网络交互、实时识别，大大缩短了用户等待时间，提高了用户体验；弱势是：受到模型大小限制，其中准确率也有限。如何在web端使用js实现人脸检测呢？为了实现Web端人脸识别，需要熟悉相关的编程语言和技术，如JavaScript、HTML、CSS、WebRTC等。同时还需要掌握相关的计算机视觉和人工智能技术。值得注意的是，由于Web端的计
Eclipse中自定义快捷键设置的方法
Jan 28, 2024 am 10:01 AM
如何在Eclipse中自定义快捷键设置？作为一名开发人员，在使用Eclipse进行编码时，熟练掌握快捷键是提高效率的关键之一。Eclipse作为一款强大的集成开发环境，不仅提供了许多默认的快捷键，还允许用户根据自己的偏好进行个性化的定制。本文将介绍如何在Eclipse中自定义快捷键设置，并给出具体的代码示例。打开Eclipse首先，打开Eclipse，并进入
如何使用PHP和JS创建股票蜡烛图
Dec 17, 2023 am 08:08 AM
如何使用PHP和JS创建股票蜡烛图股票蜡烛图是股票市场中常见的一种技术分析图形，通过绘制股票的开盘价、收盘价、最高价和最低价等数据，帮助投资者更直观地了解股票的价格波动情况。本文将教你如何使用PHP和JS创建股票蜡烛图，并附上具体的代码示例。一、准备工作在开始之前，我们需要准备以下环境：1.一台运行PHP的服务器2.一个支持HTML5和Canvas的浏览器3
股票分析必备工具：学习PHP和JS绘制蜡烛图的步骤
Dec 17, 2023 pm 06:55 PM
股票分析必备工具：学习PHP和JS绘制蜡烛图的步骤，需要具体代码示例随着互联网和科技的快速发展，股票交易已经成为许多投资者的重要途径之一。而股票分析是投资者决策的重要一环，其中蜡烛图被广泛应用于技术分析中。学习如何使用PHP和JS绘制蜡烛图将为投资者提供更多直观的信息，帮助他们更好地做出决策。蜡烛图是一种以蜡烛形状来展示股票价格的技术图表。它展示了股票价格的
edius自定义屏幕布局的操作流程
Mar 27, 2024 pm 06:50 PM
1、下图是edius默认的屏幕布局，默认的EDIUS窗口布局是横向版式，因此在单显示器环境中，许多窗口是重叠在一起的，且预览窗口为单窗口模式。2、您可以通过【视图】菜单栏启用【双窗口模式】，使预览窗口同时显示播放窗口和录制窗口。3、您可以通过【视图菜单栏>窗口布局>常规】来恢复默认屏幕布局。另外您还可以自定义适合您的布局方式，并保存为常用屏幕布局：将窗口拖动成适合自己的布局，然后点击【视图>窗口布局>保存当前布局>新建】，在弹出的【保存当前布局】小窗口中输入布局名称，单击确定
Mac系统滚动条怎么设置始终显示-滚动条设置始终显示的方法
Mar 18, 2024 pm 06:22 PM
近日有一些小伙伴咨询小编Mac系统滚动条怎么设置始终显示?下面就为大家带来了Mac系统滚动条设置始终显示的方法，有需要的小伙伴可以来了解了解哦。第一步：在系统开始菜单，选择【系统偏好设置】选项。第三步：在系统偏好设置页面，选择【通用】选项。第三步：在通用页面，选择【始终】显示滚动条。
PHP与JS开发技巧：掌握绘制股票蜡烛图的方法
Dec 18, 2023 pm 03:39 PM
随着互联网金融的迅速发展，股票投资已经成为了越来越多人的选择。而在股票交易中，蜡烛图是一种常用的技术分析方法，它能够显示股票价格的变化趋势，帮助投资者做出更加精准的决策。本文将通过介绍PHP和JS的开发技巧，带领读者了解如何绘制股票蜡烛图，并提供具体的代码示例。一、了解股票蜡烛图在介绍如何绘制股票蜡烛图之前，我们首先需要了解一下什么是蜡烛图。蜡烛图是由日本人
