原生js实现自定义滚动条

本文实例为大家分享了js实现自定义滚动条的具体代码,供大家参考,具体内容如下

1.HTML文件

div1是滚动条,div2是滚动小球,div3是文本区域容器,div4是文本区域。

<div id="div">
 <div id="div1">
 <div id="div2"> </div>
 </div>
 <div id="div3">
 <div id="div4">
 <p>CSS3 教程</p>
 <p>CSS3 教程</p>
 <p>CSS3 简介</p>
 <p>CSS3 边框</p>
 <p>CSS3 圆角</p>
 <p>CSS3 背景</p>
 <p>CSS3 渐变</p>
 <p>CSS3 文本效果</p>
 <p>CSS3 字体</p>
 <p>CSS3 2D 转换</p>
 <p>CSS3 3D 转换</p>
 <p>CSS3 过渡</p>
 <p>CSS3 动画</p>
 <p>CSS3 多列</p>
 <p>CSS3 用户界面</p>
 <p>CSS3 图片</p>
 <p>CSS3 按钮</p>
 <p>CSS3 分页</p>
 <p>CSS3 框大小</p>
 <p>CSS3 弹性盒子</p>
 <p>CSS3 多媒体查询</p>
 <p>CSS3 多媒体查询实例</p>
 </div>
 </div>
</div>

2.css样式文件

通过容器溢出隐藏,文本区域的绝对定位,然后再交给js处理。

*{padding: 0; margin: 0;}
#div{top:200px;left:25%;width: 50%;height: 300px; position: absolute;
}
#div1{width: 20px; height: 300px; position: relative;
background: #CCCCCC; border-radius: 28px; float: right; cursor: pointer;}
#div1 #div2{left: -4px;width: 28px;height: 28px;border-radius: 50%; background: red;
position: absolute;}

#div3{width: 90%; height: 300px; border: 2px solid #CCCCCC;
position: relative; float: left; overflow: hidden;}
#div3 #div4{top:0;left:0;width: 100%; position: absolute; font-family: "微软雅黑";
font-size: 19px; letter-spacing: 1px; padding: 3px 6px;}

3.js脚本代码

window.onload =function(){
 var allDiv =document.getElementById('div');
 var oDiv =document.getElementById('div2');
 var aDiv =document.getElementById('div1');
 var textDiv1 =document.getElementById('div3');
 var textDiv2 =document.getElementById('div4');

 // 进度条拖动,内容跟着运动事件
 oDiv.onmousedown =function(ev){
 var oEvent =ev||event;

 var disY =oEvent.clientY -oDiv.offsetTop;

 if(oDiv.setCapture){
 oDiv.onmousemove =mouseMove;
 oDiv.onmouseup =mouseUp;

 oDiv.setCapture();
 }else{
 document.onmousemove =mouseMove;
 document.onmouseup =mouseUp;
 }

 function mouseMove(ev){
 var oEvent =ev||event;
 var t =oEvent.clientY -disY;
 var bottomLine = aDiv.offsetHeight-oDiv.offsetHeight; 

 if(t <0){
 t =0;
 }else if(t >bottomLine){
 t =bottomLine;
 }

  var percent =t/272;

 oDiv.style.top =t+'px';
 textDiv2.style.top =-(textDiv2.offsetHeight-textDiv1.offsetHeight)*percent+'px';

 };

 function mouseUp(){
 this.onmousemove =null;
 this.onmouseup =null;

 if(oDiv.releaseCapture){
 oDiv.releaseCapture();
 }
 };

 return false;
 };

 // 点击进度条,开启定时器,小球做匀速运动到达后,清楚定时器
 aDiv.onmousedown=function(ev){
 var oEvent =ev||event;
 var divY =oEvent.clientY-allDiv.offsetTop;
 var timer =null;var speed=10;

 clearInterval(timer)
 timer = setInterval(function(){
 var percent=oDiv.offsetTop/272;

 if(oDiv.offsetTop<divY-28){
 oDiv.style.top =oDiv.offsetTop + speed +'px';
 textDiv2.style.top =-(textDiv2.offsetHeight-textDiv1.offsetHeight)*percent +'px';
 }else if(oDiv.offsetTop>divY){
 oDiv.style.top =oDiv.offsetTop - speed +'px';
 textDiv2.style.top =-(textDiv2.offsetHeight-textDiv1.offsetHeight)*percent +'px';
 }else if(oDiv.offsetTop>260){
 oDiv.offsetTop = 272+'px';
 clearInterval(timer);
 }else if(oDiv.offsetTop<10){
 oDiv.offsetTop = 0+'px';
 clearInterval(timer);
 }else{
 clearInterval(timer);
 }

 },10);

 }

}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2021-01-20

判断滚动条到底部的JS代码

判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop.clientHeight.scrollHeight. scrollTop为滚动条在Y轴上的滚动距离. clientHeight为内容可视区域的高度. scrollHeight为内容可视区域的高度加上溢出(滚动)的距离. 从这个三个属性的介绍就可以看出来,滚动条到底部的条件即为scrollTop + clientHeight == scrollHeight. 废话不多少说,赶紧上代码(兼容不同的浏览器). 复制代码 代码如下: /

JS JQUERY实现滚动条自动滚到底的方法

设置页面加载时滚动条自动滚到底的方法: jQuery: 复制代码 代码如下: $(function(){   var h = $(document).height()-$(window).height();   $(document).scrollTop(h); }); JavaScript: 复制代码 代码如下: window.onload = function(){   var h = document.documentElement.scrollHeight || document.bod

JS实现判断滚动条滚到页面底部并执行事件的方法

需要了解三个dom元素,分别是:clientHeight.offsetHeight.scrollTop. clientHeight:这个元素的高度,占用整个空间的高度,所以,如果一个div有滚动条,那个这个高度则是不包括滚动条没显示出来的下面部分的内容.而只是单纯的DIV的高度. offsetHeight:是指元素内容的高度.依照上面的,那这个高度呢就是DIV内部的高度,包括可见部分及以滚动条下面的不可见部分. scrollTop:这个是什么呢?他可以理解为滚动条可以滚动的长度. 举例,如果一个

当滚动条滚动到页面底部自动加载增加内容的js代码

1,注册页面滚动事件,window.onscroll = function(){ }; 2,相关获取页面高度.滚动条位置.文档高度的函数: 复制代码 代码如下: //获取滚动条当前的位置 function getScrollTop() { var scrollTop = 0; if (document.documentElement && document.documentElement.scrollTop) { scrollTop = document.documentElement.s

js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码

获取浏览器窗口的可视区域高度和宽度,滚动条高度有需要的朋友可参考一下.IE中,浏览器显示窗口大小只能以下获取: 代码如下复制代码 复制代码 代码如下: document.body.offsetWidth document.body.offsetHeight 在声明了DOCTYPE的浏览器中,可以用以下来获取浏览器显示窗口大小: 代码如下复制代码 复制代码 代码如下: document.documentElement.clientWidth document.documentElement.cli

js实现滚动条滚动到某个位置便自动定位某个tr

要实现带滚动条的table,定位到某个tr,其实是很简单的,只有几行js代码就可以完成,具体内容如下 js代码 <strong><script type="text/javascript"> function test(){ var $objTr = $("#location"); //找到要定位的地方 tr $objTr.css("background-color","lightgray"); //设

js判断滚动条是否已到页面最底部或顶部实例

本文实例讲述了js判断滚动条是否已到页面最底部或顶部的方法.分享给大家供大家参考.具体分析如下: 我们经常会看到很多的网站一个返回顶部效果就是当我们滚动条到指定位置时返回顶部出来了,否则就自动隐藏了,下面就来给大家介绍这种效果实现原理与方法. 当可视区域小于页面的实际高度时,判定为出现滚动条,即: 复制代码 代码如下: if (document.documentElement.clientHeight < document.documentElement.offsetHeight) scroll

js操作滚动条事件实例

本文实例讲述了js操作滚动条事件的方法.分享给大家供大家参考.具体分析如下: 之前一直很纳闷,如何监视滚动条的事件,今天终于有点明白了. 下边代码,是监听滚动条只要移动,下方的返回顶部的div显示与隐藏的代码 window.onscroll = function () { var t = document.documentElement.scrollTop || document.body.scrollTop; if (t > 0) { $(".cbbfixed").css(&q

js滚动条回到顶部的代码

虽然平滑性处理的不好,但非常适合学习 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="tex

JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)

js与jquery获得页面大小.滚动条位置.元素位置 复制代码 代码如下: //页面位置及窗口大小 function GetPageSize() {var scrW, scrH; if(window.innerHeight && window.scrollMaxY) {    // Mozilla    scrW = window.innerWidth + window.scrollMaxX;    scrH = window.innerHeight + window.scrollMaxY

JS和Jquery获取和修改label的值的示例代码

获取值: label标签在JS和Jquery中使用不能像其他标签一样用value获取它的值: 复制代码 代码如下: var label=document.getElementById("id"); var value=label.value; var value=$("#id").val(); 可以这样: JS: 复制代码 代码如下: var label=document.getElementById("id"); var value=label

JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)

jQuery获取Select选择的Text和Value: 语法解释: 1. $("#select_id").change(function(){//code...});   //为Select添加事件,当选择其中一项时触发 2. var checkText=$("#select_id").find("option:selected").text();  //获取Select选择的Text 3. var checkValue=$("#se

jquery获取子节点和父节点的示例代码

一.获取子节点 比如是一个 id 为 test 的 div元素,我们这样选中,$('#test'),我们要查找这个div下的一个class为demo的span元素,有一下几种方法 1.使用筛选条件 $('#test span.demo') 2.使用find()函数 $('#test').find('span.demo') 3.使用children()函数 $('#test').children('span.demo') 二.获取父节点 jquery获取父元素方法比较多,比如parent(),pa

jQuery获取Radio,CheckBox选择的Value值(示例代码)

$("input[name='radio_name'][checked]").val(); //选择被选中Radio的Value值$("#text_id").focus(function(){//code...}); //事件 当对象text_id获取焦点时触发$("#text_id").blur(function(){//code...}); //事件 当对象text_id失去焦点时触发$("#text_id").selec

JS和jquery获取各种屏幕的宽度和高度的代码

Javascript: 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: document.body.offsetWidth (包括边线的宽) 网页可见区域高: document.body.offsetHeight (包括边线的高) 网页正文全文宽: document.body.scrollWidth 网页正文全文高: document.body.scrollHeight 网页被卷去的高

jQuery获取页面元素绝对与相对位置的方法

本文实例讲述了jQuery获取页面元素绝对与相对位置的方法.分享给大家供大家参考.具体如下: 获取页面某一元素的绝对X,Y坐标,可以用offset()方法: var X = $('#DivID').offset().top; var Y = $('#DivID').offset().left; 获取相对(父元素)位置: var X = $('#DivID').position().top; var Y = $('#DivID').position().left; var pleft = $("s

jQuery获取页面及个元素高度、宽度的总结——超实用

下面把jQuery获取页面及个元素高度.宽度的方法汇总,分享给大家. 获取浏览器显示区域(可视区域)的高度 : 复制代码 代码如下: $(window).height(); 获取浏览器显示区域(可视区域)的宽度 : 复制代码 代码如下: $(window).width(); 获取页面的文档高度 复制代码 代码如下: $(document).height(); 获取页面的文档宽度 : 复制代码 代码如下: $(document).width(); 浏览器当前窗口文档body的高度: 复制代码 代码

js或jquery实现页面打印可局部打印

js或jquery实现页面打印(局部打印) 1.js实现(可实现局部打印) 复制代码 代码如下: <html> <title>js打印</title> <head></head><body> <input id="btnPrint" type="button" value="打印" onclick="javascript:window.print();&quo

jQuery简单获取DIV和A标签元素位置的方法

本文实例讲述了jQuery简单获取DIV和A标签元素位置的方法.分享给大家供大家参考,具体如下: 一.获取DIV的位置 var top = jquery("#div_id").offset().top; //获取div的居上位置 var left = jquery("#div_id").offset().left; //获取div的居左位置 var height = jquery("#div_id").height(); //获取div的高度 v