首页
所有分类
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中的Document文档对象
Jan 16 Javascript
javascript json 新手入门文档
Dec 03 Javascript
jquery实现邮箱自动补全功能示例分享
Feb 17 Javascript
js操作模态窗口及父子窗口间相互传值示例
Jun 09 Javascript
js实现的xml对象转json功能示例
Dec 24 Javascript
JavaScript递归算法生成树形菜单
Aug 15 Javascript
vue2.0 根据状态值进行样式的改变展示方法
Mar 13 Javascript
vue+eslint+vscode配置教程
Aug 09 Javascript
简述ES6新增关键字let与var的区别
Aug 23 Javascript
Vuex实现数据共享的方法
Dec 20 Javascript
node.js使用net模块创建服务器和客户端示例【基于TCP协议】
Feb 14 Javascript
vue基于Echarts的拖拽数据可视化功能实现
Dec 04 Vue.js
详解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
华为(1) Debian(1) 虚拟键盘(1) RustDesk(1) 蓝牙耳机(1) xhunter1.sys(1) 鸿蒙3.0(1) HarmonyOS(1) 蓝牙(1) 鸿蒙(2)
You might like
php地址引用(php地址引用的效率问题)
2012/03/23 PHP
分享PHP header函数使用教程
2013/09/05 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
PHP结合Vue实现滚动底部加载效果
2017/12/17 PHP
如何简单地用YUI做JavaScript动画
2007/03/10 Javascript
js 数组克隆方法 小结
2010/03/20 Javascript
EXTJS FORM HIDDEN TEXTFIELD 赋值 使用value不好用的问题
2011/04/16 Javascript
javascript写的简单的计算器，内容很多，方法实用，推荐
2011/12/29 Javascript
JavaScript Promise启示录
2014/08/12 Javascript
node.js require() 源码解读
2015/12/13 Javascript
JS实现添加,替换,删除节点元素的方法
2016/06/30 Javascript
JS实现保留n位小数的四舍五入问题示例
2016/08/03 Javascript
JQ中$(window).load和$(document).ready区别与执行顺序
2017/03/01 Javascript
javascript作用域链与执行环境详解
2017/03/25 Javascript
jfinal与bootstrap的登出实战详解
2017/11/27 Javascript
vee-validate vue 2.0自定义表单验证的实例
2018/08/28 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)
2019/01/23 Javascript
layui表格数据重载
2019/07/27 Javascript
vue父组件给子组件的组件传值provide inject的方法
2019/10/23 Javascript
JS深入学习之数组对象排序操作示例
2020/05/01 Javascript
[54:43]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第一场 2月22日
2021/03/11 DOTA
Python利用Beautiful Soup模块搜索内容详解
2017/03/29 Python
Python实现嵌套列表及字典并按某一元素去重复功能示例
2017/11/30 Python
5个很好的Python面试题问题答案及分析
2018/01/19 Python
如何通过python的fabric包完成代码上传部署
2019/07/29 Python
Python在后台自动解压各种压缩文件的实现方法
2020/11/10 Python
通过python-pptx模块操作ppt文件的方法
2020/12/26 Python
canvas如何实现多张图片编辑的图片编辑器
2020/03/10 HTML / CSS
日本最大美瞳直送网：Morecontact（中文）
2019/04/03 全球购物
ECCO俄罗斯官网：北欧丹麦鞋履及皮具品牌
2020/06/26 全球购物
党员四风问题个人对照检查材料
2014/10/26 职场文书
谢师宴邀请函
2015/02/02 职场文书
2015年防灾减灾工作总结
2015/07/24 职场文书
导游词之无锡梅园
2019/11/28 职场文书
HashMap实现保存两个key相同的数据
2021/06/30 Java/Android
python三子棋游戏
2022/05/04 Python