首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

javaScript实现滚动条事件详解

Posted in Javascript onMarch 24, 2020

本文实例为大家分享了js实现滚动条事件的具体代码，供大家参考，具体内容如下

javaScript实现滚动条事件详解

代码：

<html>

 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 <title></title>

 <style>
  body {
  margin: 0;
  padding: 0;
  }

  .cont {
  height: 7000px;
  }

  #top {
  position: fixed;
  width: 100%;
  height: 55px;
  top: 0px;
  left: 0px;
  background-color: rosybrown;
  display: none;
  }

  #left {
  position: fixed;
  width: 50px;
  height: 400px;
  top: 150px;
  left: 50px;
  background-color: cadetblue;
  display: none;
  }

  #left ul {
  list-style: none;
  padding-left: 0px;
  }

  #left ul li {
  border: 1px solid white;
  /*color: azure;*/
  height: 30px;
  line-height: 30px;
  text-align: center;
  margin: 15px auto;
  /*display: none;*/
  }

  .a {
  background-color: burlywood;
  color: #FFFFFF;
  }
 </style>

 <script>
  //滚动事件
  function myScroll() {

  var i = document.body.scrollTop;
  var top = document.getElementById("top");
  var left = document.getElementById("left");
  var f1 = document.getElementById("f1");
  var f2 = document.getElementById("f2");
  var f3 = document.getElementById("f3");
  var f4 = document.getElementById("f4");
  var f5 = document.getElementById("f5");
  var f6 = document.getElementById("f6");

  //控制顶部
  if(i >= 1000) {
   top.style.display = "block";
   top.innerHTML = i;
  } else {
   top.style.display = "none";
  }

  //控制左侧
  if(i >= 2000) {
   left.style.display = "block";
  } else {
   left.style.display = "none";
  }

  //显示楼层

  if(i >= 2000 && i <= 2500) {
   f1.className = "a";
   f2.className = "";
   f3.className = "";
   f4.className = "";
   f5.className = "";
   f6.className = "";
  } else if(i > 2500 && i <= 3000) {
   f1.className = "";
   f2.className = "a";
   f3.className = "";
   f4.className = "";
   f5.className = "";
   f6.className = "";
  } else if(i > 3000 && i <= 3500) {
   f1.className = "";
   f2.className = "";
   f3.className = "a";
   f4.className = "";
   f5.className = "";
   f6.className = "";
  } else if(i > 3500 && i <= 4000) {
   f1.className = "";
   f2.className = "";
   f3.className = "";
   f4.className = "a";
   f5.className = "";
   f6.className = "";
  } else if(i > 4000 && i <= 4500) {
   f1.className = "";
   f2.className = "";
   f3.className = "";
   f4.className = "";
   f5.className = "a";
   f6.className = "";
  } else if(i > 4500 && i <= 5000) {
   f1.className = "";
   f2.className = "";
   f3.className = "";
   f4.className = "";
   f5.className = "";
   f6.className = "a";
  }

  }
 </script>

 </head>

 <body onscroll="myScroll()">
 <div id="left">
  <ul>
  <li id="f1">1F</li>
  <li id="f2">2F</li>
  <li id="f3">3F</li>
  <li id="f4">4F</li>
  <li id="f5">5F</li>
  <li id="f6">6F</li>

  </ul>

 </div>
 <div id="top"></div>
 <div class="cont"></div>

 </body>

</html>

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

javaScript实现滚动条事件详解

- Author -

Z_唐

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript下数值型比较难点说明
Jun 07 Javascript
js 事件处理函数间的Event物件是否全等
Apr 08 Javascript
javascript继承机制实例详解
Nov 20 Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
Feb 17 Javascript
漫谈JS引擎的运行机制 你应该知道什么
Jun 15 Javascript
jQuery实现的导航下拉菜单效果示例
Sep 05 Javascript
JavaScript对象的浅拷贝与深拷贝实例分析
Jul 25 Javascript
vue1.0和vue2.0的watch监听事件写法详解
Sep 11 Javascript
教你如何编写Vue.js的单元测试的方法
Oct 17 Javascript
JS学习笔记之贪吃蛇小游戏demo实例详解
May 29 Javascript
浅谈layui 表单元素的选中问题
Oct 25 Javascript
JS中多层次排序算法的实现代码
Jan 06 Javascript
详解vue-cil和webpack中本地静态图片的路径问题解决方案
Sep 27 #Javascript
深入掌握 react的 setState的工作机制
Sep 27 #Javascript
JavaScript 保护变量不被随意修改的实现代码
Sep 27 #Javascript
JavaScript实现打印星型金字塔功能实例分析
Sep 27 #Javascript
微信小程序 按钮滑动的实现方法
Sep 27 #Javascript
详解Vue-cli代理解决跨域问题
Sep 27 #Javascript
jQuery 利用ztree实现树形表格的实例代码
Sep 27 #jQuery
Sqlite(2) ICF-5900W(2) Spring-Retry(1) muduo(1) 多线程(6) TcpServer(1) Spring Boot(5) Fragment(1) pt-archiver(1) EventBus(1)
You might like
php单件模式结合命令链模式使用说明
2008/09/07 PHP
一些PHP Coding Tips(php小技巧)[2011/04/02最后更新]
2011/05/02 PHP
PHP异常处理Exception类
2015/12/11 PHP
Zend Framework框架Smarty扩展实现方法
2016/03/22 PHP
php微信公众号开发（4）php实现自定义关键字回复
2016/12/15 PHP
php简单处理XML数据的方法示例
2017/05/19 PHP
laravel5.6 框架邮件队列database驱动简单demo示例
2020/01/26 PHP
Ctrl+Enter提交内容信息
2006/06/26 Javascript
点击下载链接 弹出页面实现代码
2009/10/01 Javascript
JS实现切换标签页效果实例代码
2013/11/01 Javascript
jquery基础教程之deferred对象使用方法
2014/01/22 Javascript
使用nodejs、Python写的一个简易HTTP静态文件服务器
2014/07/18 NodeJs
Javascript基础教程之argument 详解
2015/01/18 Javascript
基于JavaScript实现自定义滚动条
2017/01/25 Javascript
Angular中使用$watch监听object属性值的变化(详解)
2017/04/24 Javascript
微信小程序实现的动态设置导航栏标题功能示例
2019/01/31 Javascript
JS实现li标签的删除
2019/04/12 Javascript
JavaScript中的垃圾回收与内存泄漏示例详解
2019/05/02 Javascript
详解为element-ui的Select和Cascader添加弹层底部操作按钮
2020/02/07 Javascript
[04:11]2014DOTA2国际邀请赛 CIS遗憾出局梦想不灭
2014/07/09 DOTA
[01:34:42]NAVI vs EG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python中list列表的高级函数
2016/05/17 Python
matplotlib设置legend图例代码示例
2017/12/19 Python
Linux上使用Python统计每天的键盘输入次数
2019/04/17 Python
pyqt5 使用label控件实时显示时间的实例
2019/06/14 Python
Python学习笔记之错误和异常及访问错误消息详解
2019/08/08 Python
Python对接支付宝支付自实现功能
2019/10/10 Python
下载与当前Chrome对应的chromedriver.exe(用于python+selenium)
2020/01/14 Python
python 实现线程之间的通信示例
2020/02/14 Python
SmartBuyGlasses台湾：名牌眼镜，名牌太阳眼镜及隐形眼镜
2017/01/04 全球购物
美国在线纱线商店：Darn Good Yarn
2019/03/20 全球购物
英国最大的割草机购买网站：Just Lawnmowers
2019/11/02 全球购物
党政领导班子民主生活会整改措施
2014/09/18 职场文书
2016应届毕业生实习心得体会
2015/10/09 职场文书
SQL实现LeetCode(196.删除重复邮箱)
2021/08/07 MySQL
Python+Selenium实现读取网易邮箱验证码
2022/03/13 Python