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新闻滚动插件 jquery.roller.js
Jun 27 Javascript
用JSON做数据传输格式中的一些问题总结
Dec 21 Javascript
Js 时间函数getYear()的使用问题探讨
Apr 01 Javascript
javascript正则匹配汉字、数字、字母、下划线
Apr 10 Javascript
jquery+json实现分页效果
Mar 07 Javascript
Node.js DES加密的简单实现
Jul 07 Javascript
Vue.js第四天学习笔记(组件)
Dec 02 Javascript
node使用Koa2搭建web项目的方法
Oct 17 Javascript
Vue 按键修饰符处理事件的方法
May 04 Javascript
jQuery实现仿京东防抖动菜单效果示例
Jul 06 jQuery
在vue中使用vue-echarts-v3的实例代码
Sep 13 Javascript
vuex Module将 store 分割成模块的操作
Dec 07 Vue.js
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 三维饼图的实现代码
2008/09/28 PHP
js 页面执行时间计算代码
2009/03/04 Javascript
理解javascript中的回调函数(callback)
2014/09/02 Javascript
JavaScript基础教程之alert弹出提示框实例
2014/10/16 Javascript
jQuery使用之标记元素属性用法实例
2015/01/19 Javascript
基于jQuery实现仿百度首页换肤背景图片切换代码
2015/08/25 Javascript
JavaScript关于提高网站性能的几点建议(一)
2016/07/24 Javascript
Angular.JS去掉访问路径URL中的#号详解
2017/03/30 Javascript
详解a++和++a的区别
2017/08/30 Javascript
详解开发react应用最好用的脚手架 create-react-app
2018/04/24 Javascript
JS/HTML5游戏常用算法之碰撞检测 像素检测算法实例详解
2018/12/12 Javascript
详解Vue.directive 自定义指令
2019/03/27 Javascript
微信小程序wxml列表渲染原理解析
2019/11/27 Javascript
[02:37]2015国际邀请赛选手档案—LGD.Xiao8
2015/07/28 DOTA
Python网络编程之TCP与UDP协议套接字用法示例
2018/02/02 Python
TensorFlow实现卷积神经网络CNN
2018/03/09 Python
Python之使用adb shell命令启动应用的方法详解
2019/01/07 Python
pyqt5 使用label控件实时显示时间的实例
2019/06/14 Python
python并发编程多进程 模拟抢票实现过程
2019/08/20 Python
pandas中的数据去重处理的实现方法
2020/02/10 Python
基于Python模拟浏览器发送http请求
2020/11/06 Python
Python实现邮件发送的详细设置方法(遇到问题)
2021/01/18 Python
伦敦剧院门票:From The Box Office
2018/06/30 全球购物
物业管理公司实习生自我鉴定
2013/09/19 职场文书
网络工程与软件技术毕业生自荐信
2013/09/24 职场文书
小学教师学期末自我评价
2013/09/25 职场文书
建筑自我鉴定
2013/10/19 职场文书
大学毕业通用个人的求职信
2013/12/08 职场文书
班级入场式解说词
2014/02/01 职场文书
2014年挂职干部工作总结
2014/12/06 职场文书
幼儿园托班教育随笔
2015/08/14 职场文书
社区干部培训心得体会
2016/01/06 职场文书
掌握这项技巧,一年阅读300本书不是梦
2019/09/12 职场文书
mysql字符串截取函数小结
2021/04/05 MySQL
看完这篇文章获得一些java if优化技巧
2021/07/15 Java/Android
室外天线与收音机天线杆接合方法
2022/04/05 无线电