javascript实现滚动条效果


Posted in Javascript onMarch 24, 2020

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

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
<style>
 html, body {
  height: 100%;
  margin: 0;
 }
 #container {
  position: absolute;
  top: 50px;
  left: 100px;
  height: 400px;
  width: 150px;
  background-color: aliceblue;
  padding: 2rem;
  box-sizing: border-box;
  /*必须属性,否则给scrollTop赋值无效*/
  overflow-y: hidden;
  position: relative;
  padding-right: 30px;
 }
 .scrollbar {
  height: 50px;
  width: 10px;
  border-radius: 20px;
  background: #ccc;
  position: absolute;
  right: 0;
 }
</style>
 <script>
 window.onload = function () {
  var scrollbar = document.querySelector('.scrollbar');
  var container = scrollbar.parentNode;
  container.scrollbar = scrollbar;
  container.ratio =
   (container.scrollHeight - container.offsetHeight) / (container.offsetHeight - scrollbar.offsetHeight);
  container.addEventListener('mousewheel', function(e) {
   this.scrollTop += e.deltaY;
   this.scrollbar.style.top = (this.scrollTop + this.scrollTop / this.ratio) + 'px';
  });
  container.addEventListener('mousedown', function (e) {
   if (e.target === this.scrollbar) {
    this.prevY = e.pageY;
   }
  });
  container.addEventListener('mouseup', function (e) {
   this.prevY = null;
  });
  container.addEventListener('mousemove', function (e) {
   if (this.prevY) {
    this.scrollTop += (e.pageY - this.prevY) * this.ratio;
    this.scrollbar.style.top = (this.scrollTop + this.scrollTop / this.ratio) + 'px';
    this.prevY = e.pageY;
   }
   e.preventDefault();
  });
 }
 </script>
</head>
<body>
 <div id="container">
  <div class="scrollbar"></div>
  <p>fefe</p>
  <p>fefe</p>
  <p>fefe</p>
  <p>fefe</p>
  <p>fefe</p>
  <p>fefe</p>
  <p>fefe</p>
  <p>fefe</p>
  <p>fefe</p>
  <p>fefe</p>
  <p>fefe</p>
  <p>fefe</p>
  <p>fefe</p>
  <p>fefe</p>
  <p>fefe</p>
  <p>fefe</p>
  <p>fefe</p>
  <p>fefe</p>
  <p>fefe</p>
  <p>fefe</p>
  <p>fefe</p>
 </div>
</body>
</html>

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

Javascript 相关文章推荐
JQuery 遮罩层实现(mask)实现代码
Jan 09 Javascript
jquery 日期分离成年月日的代码
May 14 Javascript
JS中confirm,alert,prompt函数区别分析
Jan 17 Javascript
javascript父、子页面交互技巧总结
Aug 08 Javascript
JavaScript拆分字符串时产生空字符的解决方案
Sep 26 Javascript
Javascript学习笔记之相等符号与严格相等符号
Nov 23 Javascript
JS实现兼容各浏览器解析XML文档数据的方法
Jun 01 Javascript
JavaScript实现图片滑动切换的代码示例分享
Mar 06 Javascript
React生命周期原理与用法踩坑笔记
Apr 28 Javascript
js实现带有动画的返回顶部
Aug 09 Javascript
vue实现两个区域滚动条同步滚动
Dec 13 Vue.js
javascript实现倒计时关闭广告
Feb 09 Javascript
Webpack中SplitChunksPlugin 配置参数详解
Mar 24 #Javascript
JS实现点星星消除小游戏
Mar 24 #Javascript
js实现小星星游戏
Mar 23 #Javascript
JS Array.from()将伪数组转换成数组的方法示例
Mar 23 #Javascript
Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)
Mar 23 #Javascript
小程序使用分包的示例代码
Mar 23 #Javascript
用JS实现选项卡
Mar 23 #Javascript
You might like
php mysql 判断update之后是否更新了的方法
2012/01/10 PHP
php页面,mysql数据库转utf-8乱码,utf-8编码问题总结
2015/08/27 PHP
WordPress中重置文章循环的rewind_posts()函数讲解
2016/01/11 PHP
PHP通过微信跳转的Code参数获取用户的openid(关键代码)
2016/07/06 PHP
php获取开始与结束日期之间所有日期的方法
2016/11/29 PHP
PHP+Apache环境中如何隐藏Apache版本
2017/11/24 PHP
超强的IE背景图片闪烁(抖动)的解决办法
2007/09/09 Javascript
jquery 图片轮换效果
2010/07/29 Javascript
Jquery ThickBox插件使用心得(不建议使用)
2010/09/08 Javascript
基于jquery的仿百度搜索框效果代码
2011/04/11 Javascript
jquery中ajax学习笔记4
2011/10/16 Javascript
在NodeJS中启用ECMAScript 6小结(windos以及Linux)
2014/07/15 NodeJs
js限制checkbox选中个数以限制六个为例
2014/07/15 Javascript
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
2016/05/10 Javascript
AngularJS优雅的自定义指令
2016/07/01 Javascript
vue中使用refs定位dom出现undefined的解决方法
2017/12/21 Javascript
vue开发环境配置跨域的方法步骤
2019/01/16 Javascript
简述ES6新增关键字let与var的区别
2019/08/23 Javascript
JavaScript对象属性操作实例解析
2020/02/04 Javascript
Python升级提示Tkinter模块找不到的解决方法
2014/08/22 Python
python实现list由于numpy array的转换
2018/04/04 Python
Python实现基于socket的udp传输与接收功能详解
2019/11/15 Python
Python使用Numpy模块读取文件并绘制图片
2020/05/13 Python
filter使用python3代码进行迭代元素的实例详解
2020/12/03 Python
Vichy薇姿加拿大官网:法国药妆,全球专业敏感肌护肤领先品牌
2018/07/11 全球购物
描述JSP和Servlet的区别、共同点、各自应用的范围
2012/10/02 面试题
《北京的春节》教学反思
2014/04/07 职场文书
请假条格式范文
2014/04/10 职场文书
教师产假请假条
2014/04/10 职场文书
高三学生评语大全
2014/04/25 职场文书
副科级后备干部考察材料
2014/05/15 职场文书
主要负责人任命书
2014/06/06 职场文书
水污染治理工程专业求职信
2014/06/14 职场文书
假释思想汇报范文
2014/10/11 职场文书
初中生物教学反思
2016/02/20 职场文书
Docker与K8s关系介绍不会Docker也可以使用K8s
2022/06/25 Servers