javascript实现滚动条效果

更新时间：2020年03月24日 09:33:51 作者：zhanghe-V

这篇文章主要为大家详细介绍了javascript实现滚动条效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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>

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

您可能感兴趣的文章:

js
滚动条

JS新包管理工具yarn和npm的对比与使用入门
在2016年10月11日facebook 公开了新的javascript包管理工具 yarn, 用来替代目前被广泛使用的npm(nodejs 自带的包管理工具)，本文将介绍yarn工具带来的优点和使用入门，以及对比npm解决了什么问题，带来哪些便利。有需要的朋友们下面来一起看看吧。
2016-12-12
IntelliJ IDEA 安装vue开发插件的方法
本篇文章主要介绍了IntelliJ IDEA 安装vue开发插件的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-11-11
JavaScript可视化与Echarts详细介绍
提到数据可视化相信大家都不陌生，它能够将单一的数据通过合适的可视化图表类型表现出来，使其更加直观的展现数据的变化趋势、对比、峰值等等。其实在前端开发中，数据可视化也尤为重要，在众多图表库中，echarts就是最常见的图表库之一
2022-07-07
关于微信小程序map组件z-index的层级问题分析
这篇文章主要给大家介绍了关于微信小程序map组件z-index的层级问题的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用微信小程序具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-07-07
javascript判断机器是否联网的2种方法
只有机器已经联网以后，web应用才能启动，下面使用javascript判断机器是否联网，具体判断代码如下，有此需求的朋友可以参考下
2013-08-08
BootStrap创建响应式导航条实例代码
这篇文章主要介绍了BootStrap创建响应式导航条实例代码的相关资料,需要的朋友可以参考下
2016-05-05
JS使用ActiveXObject实现用户提交表单时屏蔽敏感词功能
这篇文章主要介绍了JS采用ActiveXObject实现用户在提交表单时屏蔽敏感词的功能的相关资料,需要的朋友可以参考下
2017-06-06
JavaScript实现邮箱地址自动匹配功能代码
这篇文章主要为大家详细介绍了JavaScript实现E-mail邮箱地址自动匹配功能代码,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-11-11
为指定元素增加样式的js代码
从此例子中发现，js对"" 与 " " ，注意中间还有一空格，解析是非常严格的。在java与net中还有待于研究。
2009-12-12
js延迟加载的6种方式实例总结
js的延迟加载有助与提高页面的加载速度,下面这篇文章主要给大家介绍了关于js延迟加载的6种方式,文中通过图文介绍的非常详细,对大家学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2023-04-04