JS自定义滚动条效果
本文实例为大家分享了JS自定义滚动条的具体代码，供大家参考，具体内容如下
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#all{
width: 500px;
height: 50px;
background-color: sandybrown;
border-radius: 25px;
margin: 0 auto;
position: relative;
}
#div1{
width: 50px;
height: 50px;
border-radius: 50%;
background-color: rosybrown;
position: absolute;
}
#box{
background-color: yellow;
position: absolute;
top: 200px;
left: 200px;
}
</style>
</head>
<body>
<div id="all">
<div id="div1"></div>
</div>
<div id="box"></div>
<script type="text/javascript">
var oAll = document.getElementById("all");
var oDiv1 = document.getElementById("div1");
var oBox = document.getElementById("box");
var maxL = oAll.clientWidth - oDiv1.offsetWidth;
oDiv1.onmousedown = function(){
var ev = ev || window.event;
var lessX = ev.clientX - oDiv1.offsetLeft;
document.onmousemove = function(){
var ev = ev || window.event;
var posL = ev.clientX - lessX;
if(posL<0){
posL = 0;
}
if(posL>maxL){
posL = maxL;
}
oDiv1.style.left = posL + "px";
//滚动条移动的百分比
//oDiv1.offsetLeft/maxL
var per = posL/maxL;
//定义宽0~300
oBox.style.width = 300*per+"px";
oBox.style.height = 300*per+"px";
oBox.style.marginTop = -oBox.offsetHeight/2+"px";
oBox.style.marginLeft = -oBox.offsetWidth/2+"px";
}
}
document.onmouseup =function(){
document.onmousemove = null;
}
</script>
</body>
更多关于滚动效果的精彩文章点击下方专题：
javascript滚动效果汇总
jquery滚动效果汇总
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
本文向大家介绍JS实现的页面自定义滚动条效果，包括了JS实现的页面自定义滚动条效果的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JS实现的页面自定义滚动条效果。分享给大家供大家参考，具体如下： 这里演示网页上用的滚动条效果，是一个自定义的滚动条代码，除了上下两个箭头以外，滚动条和一般的浏览器基本差不多，鼠标滚轮滚动，滚动条滚动。html结构很简单，mainBox是外层div，conten
-
本文向大家介绍js滚轮事件 js自定义滚动条的实现，包括了js滚轮事件 js自定义滚动条的实现的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了js自定义滚动条的实现的具体代码，供大家参考，具体内容如下 描述： 自定义滚动条的实现 效果： 实现： 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
本文向大家介绍原生js实现自定义滚动条，包括了原生js实现自定义滚动条的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了js实现自定义滚动条的具体代码，供大家参考，具体内容如下 1.HTML文件 div1是滚动条，div2是滚动小球，div3是文本区域容器，div4是文本区域。 2.css样式文件 通过容器溢出隐藏，文本区域的绝对定位，然后再交给js处理。 3.js脚本代码 以上就是本
-
问题内容： 我想用CSS自定义滚动条。 我使用此WebKit CSS代码，该代码非常适合Safari和Chrome： 如何在Firefox中执行相同的操作？ 我知道我可以使用jQuery轻松地做到这一点，但如果可行，我宁愿使用纯CSS做到这一点。 将不胜感激某人的专家意见！ 问题答案： Firefox 64添加了对规范草案CSS滚动条模块级别1的支持，该模块添加了的两个新属性，并提供了一些如何显示
-
我正在使用j文件选择器，我试图实现以下目标： https://i.stack.imgur.com/O6MNj.png 我试图强制LIST视图使用VERTICAL滚动条，或者我的第二个选项是禁用详细视图中的大小和修改列。 编辑： 有什么方法可以在jFileChooser中插入JScrollBar？
-
本文向大家介绍利用JS实现scroll自定义滚动效果详解，包括了利用JS实现scroll自定义滚动效果详解的使用技巧和注意事项，需要的朋友参考一下 前言 最近在公司开发项目的时候，原生滚动条中有些东西没办法自定义去精细的控制，于是开发一个类似于better-scroll一样的浏览器滚动监听的JS实现，下面我们就来探究一下自定义滚动需要考虑哪些东西，经过哪些过程。话不多说了，来一起看看详细的介绍吧。