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 相关文章推荐
JS类的封装及实现代码
Dec 02 Javascript
JQuery 引发两次$(document.ready)事件
Jan 15 Javascript
jQuery关键词说明插件cluetip使用指南
Apr 21 Javascript
ionic+AngularJs实现获取验证码倒计时按钮
Apr 22 Javascript
详解angularJs中关于ng-class的三种使用方式说明
Jun 02 Javascript
微信小程序 转发功能的实现
Aug 04 Javascript
使用jQuery实现两个div中按钮互换位置的实例代码
Sep 21 jQuery
JavaScript中判断为整数的多种方式及保留两位小数的方法
Sep 09 Javascript
laydate只显示时分 不显示秒的功能实现方法
Sep 28 Javascript
基于element-ui封装可搜索的懒加载tree组件的实现
May 22 Javascript
vue data对象重新赋值无效(未更改)的解决方式
Jul 24 Javascript
利用node.js开发cli的完整步骤
Dec 29 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
Flash空降上海 化身大魔王接受挑战
2020/03/02 星际争霸
php对图像的各种处理函数代码小结
2013/07/08 PHP
php命令行使用方法和命令行参数说明
2014/04/08 PHP
PHP将字符分解为多个字符串的方法
2014/11/22 PHP
PHP PDOStatement::errorInfo讲解
2019/01/31 PHP
JQuery扩展插件Validate 5添加自定义验证方法
2011/09/05 Javascript
浮动的div自适应居中显示的js代码
2013/12/23 Javascript
JQuery 使用attr方法实现下拉列表选中
2014/10/13 Javascript
JS获取数组最大值、最小值及长度的方法
2015/11/24 Javascript
浅析Proxy可以优化vue的数据监听机制问题及实现思路
2018/11/29 Javascript
微信小程序如何访问公众号文章
2019/07/08 Javascript
vue2.0 解决抽取公用js的问题
2020/07/31 Javascript
如何通过JS实现日历简单算法
2020/10/14 Javascript
[01:15:56]2018DOTA2亚洲邀请赛3月30日 小组赛A组 TNC VS Newbee
2018/03/31 DOTA
python ip正则式
2009/05/07 Python
Python数据操作方法封装类实例
2017/06/23 Python
Python实现将多个空格换为一个空格.md的方法
2018/12/20 Python
浅谈pyqt5在QMainWindow中布局的问题
2019/06/21 Python
python的pstuil模块使用方法总结
2019/07/26 Python
在vscode中配置python环境过程解析
2019/09/28 Python
python双向链表原理与实现方法详解
2019/12/03 Python
CSS3网格的三个新特性详解
2014/04/04 HTML / CSS
HTML5逐步分析实现拖放功能的方法
2020/09/30 HTML / CSS
CSMA/CD介质访问控制协议
2015/11/17 面试题
大学生毕业自我鉴定范文
2013/09/19 职场文书
教师党员思想汇报
2014/01/06 职场文书
物理系毕业生自荐书范文
2014/02/22 职场文书
解放思想演讲稿
2014/09/11 职场文书
2014房屋登记授权委托书
2014/10/13 职场文书
王金山在党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
2014年惩防体系建设工作总结
2014/12/01 职场文书
离婚案件答辩状
2015/05/22 职场文书
幼儿园教学反思范文
2016/03/02 职场文书
Golang 空map和未初始化map的注意事项说明
2021/04/29 Golang
OpenCV-Python模板匹配人眼的实例
2021/06/08 Python
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
2021/06/09 Vue.js