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 相关文章推荐
浅谈tudou土豆网首页图片延迟加载的效果
Jun 23 Javascript
JavaScript实现自己的DOM选择器原理及代码
Mar 04 Javascript
js渐变显示渐变消失示例代码
Aug 01 Javascript
javascript折半查找详解
Jan 26 Javascript
第五章之BootStrap 栅格系统
Apr 25 Javascript
jQuery点击输入框显示验证码图片
May 19 Javascript
详解handlebars+require基本使用方法
Dec 21 Javascript
多个上传文件用js验证文件的格式和大小的方法(推荐)
Mar 09 Javascript
VUE 使用中踩过的坑
Feb 08 Javascript
写一个移动端惯性滑动&amp;回弹Vue导航栏组件 ly-tab
Mar 06 Javascript
vue translate peoject实现在线翻译功能【新手必看】
Jun 07 Javascript
Postman的下载及安装教程详解
Oct 16 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运行环境配置与开发环境的配置(图文教程)
2013/06/04 PHP
php和editplus正则表达式去除空白行
2015/04/17 PHP
PHP模拟asp.net的StringBuilder类实现方法
2015/08/08 PHP
JavaScript中的对象化编程
2008/01/16 Javascript
javascript removeChild 使用注意事项
2009/04/11 Javascript
php与js的区别是什么
2013/08/05 Javascript
Javascript操作URL函数修改版
2013/11/07 Javascript
调用DOM对象的focus使文本框获得焦点
2014/02/19 Javascript
DOM节点的替换或修改函数replaceChild()用法实例
2015/01/12 Javascript
js简单实现竖向tab选项卡的方法
2015/05/04 Javascript
js实现精美的图片跟随鼠标效果实例
2015/05/16 Javascript
很酷的星级评分系统原生JS实现
2016/08/25 Javascript
AngularJS入门教程之模块化操作用法示例
2016/11/02 Javascript
基于JavaScript实现Tab选项卡切换效果
2016/11/24 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
2016/12/01 Javascript
javascript数组去重方法分析
2016/12/15 Javascript
javascript中数组的常用算法深入分析
2019/03/12 Javascript
小程序云开发教程如何使用云函数实现点赞功能
2019/05/18 Javascript
vue自定义树状结构图的实现方法
2020/10/18 Javascript
Python Sleep休眠函数使用简单实例
2015/02/02 Python
Python初学时购物车程序练习实例(推荐)
2017/08/08 Python
python web自制框架之接受url传递过来的参数实例
2018/12/17 Python
python GUI库图形界面开发之PyQt5美化窗体与控件(异形窗体)实例
2020/02/25 Python
Python 如何查找特定类型文件
2020/08/17 Python
python实现简单遗传算法
2020/09/18 Python
奥地利手表、香水、化妆品和珠宝购物网站:Brasty.at
2021/01/17 全球购物
博士生入学考试推荐信
2013/11/17 职场文书
网络专业学生个人的自我评价
2013/12/16 职场文书
测绘工程专业求职信
2014/07/15 职场文书
学习党的群众路线剖析材料
2014/10/09 职场文书
党的群众路线教育实践活动个人对照检查材料(校长)
2014/11/05 职场文书
开平碉楼导游词
2015/02/06 职场文书
学生退学证明
2015/06/23 职场文书
PyQt5爬取12306车票信息程序的实现
2021/05/14 Python
实操Python爬取觅知网素材图片示例
2021/11/27 Python
MySQL索引失效十种场景与优化方案
2023/05/08 MySQL