技术文章
当前位置:首页 > Javascript技术文章 > JS自定义滚动条效果简单实现代码

JS自定义滚动条的实例分享

  • 发布时间:
  • 作者:码农之家原创
  • 点击:110

这篇文章主要知识点是关于js、滚动条、原生js封装自定义滚动条 的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

你不知道的JavaScript 下卷
  • 类型:JavaScript大小:7 MB格式:PDF出版:人民邮电出版社作者:凯尔
立即下载

更多Javascript相关的学习资源可以参阅 Javascript电子书程序设计电子书 等栏目。

JS自定义滚动条效果简单实现代码

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自定义滚动条</title>
<style type="text/css">
#div1 {
  width: 20px;
  height: 400px;
  position: relative;
  background: black;
  margin: 5px auto;
  left: 200px;
}
 
#div2 {
  width: 20px;
  height: 20px;
  position: absolute;
  background: green;
}
 
#div3 {
  width: 300px;
  height: 300px;
  position: relative;
  overflow: hidden;
  top: -320px;
  border: 1px solid black;
  background-color:green;
}
 
#div4 {
  position: absolute;
  left: 0;
  top: -20px;
  padding: 4px;
}
</style>
<script type="text/javascript">
  window.onload = function() {
    var oDiv = document.getElementById('div1');
    var oDiv2 = document.getElementById('div2');
    var oDiv3 = document.getElementById('div3');
    var oDiv4 = document.getElementById('div4');
    var disY = 0;
    oDiv.onmousedown = function(ev) {
      var oEvent = ev || event;
      //Div距离 ClientX-Left
      disY = oEvent.clientY - oDiv2.offsetTop;
      if (oDiv2.setCapture) {
        //IE
        oDiv2.onmousemove = function(ev) {
          var oEvent = ev || event;
          var y = oEvent.clientY - disY;
          //下拉
          var scale = y / (oDiv.offsetHeight - oDiv2.offsetHeight);
          //    document.title =scale;
          //磁铁吸附
          if (scale < 0) {
            scale = 0;
          } else if (scale > 1) {
            scale = 1;
          }
          if (y < 0) {
            y = 0;
          } else if (y > oDiv.offsetHeight - oDiv2.offsetHeight) {
            y = oDiv.offsetHeight - oDiv2.offsetHeight;
          }
          oDiv2.style.top = y + 'px';
          oDiv4.style.top = -(oDiv4.offsetHeight - oDiv3.offsetHeight)
              * scale + 'px';
 
        };
        oDiv2.onmouseup = function() {
          oDiv2.onmousemove = null;
          oDiv2.onmouseup = null;
 
          oDiv2.releaseCapture();
        };
 
        oDiv2.setCapture();
      } else {
        //Chrome FF
        oDiv2.onmousemove = function(ev) {
          var oEvent = ev || event;
          var y = oEvent.clientY - disY;
          if (y < 0) {
            y = 0;
          } else if (y > Div2.offsetHeight - oDiv.offsetHeight) {
            y = Div2.offsetHeight - oDiv.offsetHeight;
          }
          oDiv2.style.top = y + 'px';
        };
        document.onmouseup = function() {
          document.onmousemove = null;
          document.onmouseup = null;
 
        };
 
      }
      //阻止浏览器的默认拖拽
      return false;
    };
 
  };
</script>
</head>
<body>
  <div id="div1" title="我是素材">
    <div id="div2" title="我是下拉线"></div>
  </div>
  <div id="div3" title="我是下拉框">
    <div id="div4">来自意大利时尚之都米兰的地标建筑“垂直森林”来到了中国。据美媒boredpanda2月6日报道,“垂直森林之父”为斯特凡诺·博埃里(Stefano
      Boeri),而南京“垂直森林”项目为亚洲首座博埃里设计在建的“垂直森林”建筑。
 
      报道称,此项建筑将由656英尺(约200米)及354英尺(约108米)的双塔楼组成,外围覆盖至少1000棵树以及约2500棵灌木类植物。“垂直森林”每天可以消化二氧化碳,并释放132磅(约60千克)的氧气。来自意大利时尚之都米兰的地标建筑“垂直森林”来到了中国。据美媒boredpanda2月6日报道,“垂直森林之父”为斯特凡诺·博埃里(Stefano
      Boeri),而南京“垂直森林”项目为亚洲首座博埃里设计在建的“垂直森林”建筑。
 
      报道称,此项建筑将由656英尺(约200米)及354英尺(约108米)的双塔楼组成,外围覆盖至少1000棵树以及约2500棵灌木类植物。“垂直森林”每天可以消化二氧化碳,并释放132磅(约60千克)的氧气。来自意大利时尚之都米兰的地标建筑“垂直森林”来到了中国。据美媒boredpanda2月6日报道,“垂直森林之父”为斯特凡诺·博埃里(Stefano
      Boeri),而南京“垂直森林”项目为亚洲首座博埃里设计在建的“垂直森林”建筑。
 
      报道称,此项建筑将由656英尺(约200米)及354英尺(约108米)的双塔楼组成,外围覆盖至少1000棵树以及约2500棵灌木类植物。“垂直森林”每天可以消化二氧化碳,并释放132磅(约60千克)的氧气。来自意大利时尚之都米兰的地标建筑“垂直森林”来到了中国。据美媒boredpanda2月6日报道,“垂直森林之父”为斯特凡诺·博埃里(Stefano
      Boeri),而南京“垂直森林”项目为亚洲首座博埃里设计在建的“垂直森林”建筑。
 
      报道称,此项建筑将由656英尺(约200米)及354英尺(约108米)的双塔楼组成,外围覆盖至少1000棵树以及约2500棵灌木类植物。“垂直森林”每天可以消化二氧化碳,并释放132磅(约60千克)的氧气。
    </div>
  </div>
</body>
</html>

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

原生js封装自定义滚动条

最近有一个关于制作在线音乐播放器的项目,需要使用一个滚动条,但是自带滚动条实在是太丑了,所以就自己琢磨了一下自定义的滚动条。

在网上看原理,说实话没怎么看懂,就趁今天上午上安卓的时候,研究了一下,结果还算是满意吧。然后就包装一个对象。

使用方法很简单,就是自定义一个div,将这个对象导入做参数,new一下就可以。也可以自己定义滚动条的样式,只要自己修改一下样式表就可以

效果图:

原生js封装自定义滚动条

代码如下:

<!doctype html> 
<html> 
<head> 
 <meta charset="utf-8"> 
 <title></title> 
</head>
<style type="text/css">
div{
 padding:0px;
 box-sizing:border-box;
 margin:0px;
 border:0px;
}
#div-5{
 width: 700px;
 height: 500px;
 border:1px solid black;
 position: relative;
 overflow: hidden;
}
.ribbit-OF-div1{
 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-div2{
 position: absolute;
 top:0px;
 right: 0px;
 width: 100%;
 height: 100px;
 background-color:rgba(0,0,0,0.3);
 border-radius: 10px;
}
.ribbit-OF-div3{
 width: 100%;
 height:auto;
 background-color: lime;
}
</style>
<body>
<div id="div-1">
<div id="div-2">

</div> 
</div>
<div id="div-3"><div id="div-4"></div></div>
<div id="div-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/>
</div>
</body>
<script type="text/javascript">
var div_5 = document.getElementById('div-5');
function OverFlow(element){
 this.element = element;
 this.ribbit_OF_div1 = document.createElement("div");
 this.ribbit_OF_div2 = document.createElement("div");
 this.ribbit_OF_div3 = document.createElement("div");
 this.createDiv = function(){
  this.ribbit_OF_div1.className = "ribbit-OF-div1";
  this.ribbit_OF_div2.className = "ribbit-OF-div2";
  this.ribbit_OF_div3.className = "ribbit-OF-div3";
  this.ribbit_OF_div3.innerHTML = this.element.innerHTML;
  this.element.innerHTML="";
  this.element.appendChild(this.ribbit_OF_div3);
  this.ribbit_OF_div1.appendChild(this.ribbit_OF_div2);
  document.body.appendChild(this.ribbit_OF_div1);
  this.ribbit_OF_div1.style.height = getComputedStyle(this.element,null).height;
  this.ribbit_OF_div1.style.left = (this.element.offsetLeft+(parseInt(getComputedStyle(this.element,null).width)-parseInt(getComputedStyle(this.ribbit_OF_div1,null).width)))+"px";
  this.ribbit_OF_div1.style.top = this.element.offsetTop+"px";
  this.ribbit_OF_div2.style.top = "0px";
 }
 this.addAudo=function(){
  var YY=null;//前鼠标位置
  var topXX = 0;//前top位置
  var topX = 0;//后top值
  var vherght = parseInt(getComputedStyle(this.ribbit_OF_div3,null).height)-parseInt(getComputedStyle(this.element,null).height);//可移动
  var dst = 0;
  //最大top移动位置
  var top_x = parseInt(getComputedStyle(this.ribbit_OF_div1,null).height)-parseInt(getComputedStyle(this.ribbit_OF_div2,null).height);
  var thio = this;
  window.onmousemove = function(e){
   fun(e.clientY);
  };
  this.ribbit_OF_div2.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_div2.style.top = (topX-1)+"px";
    dst = topX*vherght/top_x;
    thio.element.scrollTop = dst;
   }
  }
 }
 this.createDiv();
 this.addAudo();
}
new OverFlow(div_5);
</script>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持码农之家!

以上就是本次给大家分享的关于Javascript的全部知识点内容总结,大家还可以在下方相关文章里找到javascript的写法总结、 webpack 2的react开发配置详解、 js实现方块上下左右移动效、 等javascript文章进一步学习,感谢大家的阅读和支持。

上一篇:js实现方块上下左右移动效果的实例分享

下一篇:ES6中解构、参数、模块和记号用法介绍

展开 +

收起 -

相关电子书
学习笔记
网友NO.263524

原生js仿浏览器滚动条效果

效果图: 代码如下: !DOCTYPE htmlhtml 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/headbodydiv id="demo" p id="dp"我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内……

网友NO.111554

JS实现利用闭包判断Dom元素和滚动条的方向示例

本文实例讲述了JS实现利用闭包判断Dom元素和滚动条的方向。分享给大家供大家参考,具体如下: 一、判断滚动条的方向,利用闭包首先保存滚动条的位置,然后当滚动时候不断更新滚动初始值,然后通过差指判断方向 function scroll(fn) { //利用闭包判断滚动条滚动的方向 var beforeScrollTop = document.body.scrollTop, fn = fn || function() {}; window.addEventListener("scroll", function() { var afterScrollTop = document.body.scrollTop, delta = afterScrollTop - beforeScrollTop; if (delta === 0) return false; fn(delta 0 ? "down" : "up"); beforeScrollTop = afterScrollTop; }, false);}scroll(function(direction) { console.log(direction) }); 二、判断鼠标的移动方向 function direction() { var lastX = null, lastY = null; window.addEventListener("mousemove", function(event) { var curX = event.clientX, curY = event.clientY, direction = ''; // console.info(event); // console.info(event.clientX); // console.……

网友NO.113150

swing组件JScrollPane滚动条实现方法

本文研究的主要是swing组件之JScrollPane滚动条的实现代码示例,具体如下。 实例1 /* * 滚动条 */import javax.swing.*;public class Demo1 extends JFrame{JTextArea jta = null;JScrollPane jsp = null;public static void main(String[] args) {// TODO Auto-generated method stub Demo1 d = new Demo1();}public Demo1() {jta = new JTextArea();/* * JScrollPane(Component view, int vsbPolicy, int hsbPolicy) * 创建一个 JScrollPane,它将视图组件显示在一个jta视口中,视图位置使用一对滚动条控制。 * vsbPolicy 用于垂直滚动条的显示策略。默认为 ScrollPaneConstants.VERTICAL_SCROLLBAR_AS_NEEDED。 * hsbPolicy 用于水平滚动条的显示策略。默认为 ScrollPaneConstants.HORIZONTAL_SCROLLBAR_AS_NEEDED。 * 若不显示水平的滚动条则使用 JScrollPane.HORIZONTAL_SCROLLBAR_NEVER * 若不显示竖直方向的滚动条则使用 JScrollPane.VERTICAL_SCROLLBAR_NEVER * * 如果最终想要显示两个方向的滚动条,则不可直……

网友NO.179905

jquery滚动条插件jScrollPane的使用介绍

这是一个js的页面滚动条插件 使用时引入三个文件:(路径自行填写) link type="text/css" href="路径/jquery.jscrollpane.css" rel="stylesheet" media="all" / script type="text/javascript" src="路径/jquery.mousewheel.js"/script script type="text/javascript" src="路径/jquery.jscrollpane.min.js"/script 然后再给需要添加滚动条的容器加上一个方法,搞定 $(function(){ $("#contentDiv").jScrollPane(); }) 太好用了! ps:如果要修改滚动条的默认样式可以打开jquery.jscrollpane.css文件修改 当然这作为jquery的一个插件,原始的jquery包不能少且要放在插件包之前,本文略。……

<
1
>

Copyright 2018-2020 xz577.com 码农之家

电子书资源由网友、会员提供上传,本站记录提供者的基本信息及资源来路

鸣谢: “ 码小辫 ” 公众号提供回调API服务、“ 脚本CDN ”提供网站加速(本站寻求更多赞助支持)

版权投诉 / 书籍推广 / 赞助:520161757@qq.com

上传资源(网友、会员均可提供)

查看最新会员资料及资源信息