首页
所有分类
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中的原型链深入理解
Feb 24 Javascript
用js传递value默认值的示例代码
Sep 11 Javascript
jQuery中的ajax async同步和异步详解
Sep 29 Javascript
Bootstrap自定义文件上传下载样式
May 26 Javascript
ionic 上拉菜单(ActionSheet)实例代码
Jun 06 Javascript
jQuery 限制输入字符串长度
Jun 20 Javascript
AngularJS入门教程之链接与图片模板详解
Aug 19 Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
Oct 10 Javascript
让你彻底掌握es6 Promise的八段代码
Jul 26 Javascript
echarts饼图扇区添加点击事件的实例
Oct 16 Javascript
Vue 实现前进刷新后退不刷新的效果
Jun 14 Javascript
vue 开发企业微信整合案例分析
Dec 02 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
MapReduce(1) MybatisPlus(2) css3 (2) JSON(10) pyqt5(3) Qlabel(1) SpringBoot(22) capture(1) Normal From(1) self(1)
You might like
php操作xml入门之xml标签的属性分析
2015/01/23 PHP
php魔术方法功能与用法实例分析
2016/10/19 PHP
PHP常用排序算法实例小结【基本排序，冒泡排序，快速排序，插入排序】
2017/02/07 PHP
PHP自动补全表单的两种方法
2017/03/06 PHP
PHP生成指定范围内的N个不重复的随机数
2019/03/18 PHP
php和asp语法上的区别总结
2019/05/12 PHP
基于JQuery的一句代码实现表格的简单筛选
2010/07/26 Javascript
jquery 学习之二 属性相关
2010/11/23 Javascript
js实现绿白相间竖向网页百叶窗动画切换效果
2015/03/02 Javascript
jQuery插件windowScroll实现单屏滚动特效
2015/07/14 Javascript
Bootstrap3 多选和单选框(checkbox)
2016/12/29 Javascript
深入理解Node中的buffer模块
2017/06/03 Javascript
vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
2018/09/29 Javascript
小程序分页实践之编写可复用分页组件
2019/07/18 Javascript
微信小程序本地存储实现每日签到、连续签到功能
2019/10/09 Javascript
Python pass 语句使用示例
2014/03/11 Python
深入分析在Python模块顶层运行的代码引起的一个Bug
2014/07/04 Python
python实现指定字符串补全空格的方法
2015/04/30 Python
Python使用re模块实现信息筛选的方法
2018/04/29 Python
python3将视频流保存为本地视频文件
2018/06/20 Python
Python多进程池 multiprocessing Pool用法示例
2018/09/07 Python
python3实现逐字输出的方法
2019/01/23 Python
Python实现图片转字符画的代码实例
2019/02/22 Python
python如何实现数据的线性拟合
2019/07/19 Python
TensorFlow加载模型时出错的解决方式
2020/02/06 Python
python自动脚本的pyautogui入门学习
2020/04/01 Python
如何配置关联Python 解释器 Anaconda的教程(图解)
2020/04/30 Python
python不到50行代码完成了多张excel合并的实现示例
2020/05/28 Python
keras 简单 lstm实例(基于one-hot编码)
2020/07/02 Python
Python Charles抓包配置实现流程图解
2020/09/29 Python
微信浏览器左上角返回按钮拦截功能
2017/11/21 HTML / CSS
春季防火方案
2014/05/10 职场文书
鼓舞士气的口号
2014/06/16 职场文书
讲文明懂礼貌演讲稿
2014/09/11 职场文书
机关作风建设自查报告及整改措施
2014/10/21 职场文书
2016年学校禁毒宣传活动工作总结
2016/04/05 职场文书