JavaScript基础—滚动条事件

最新推荐文章于 2024-07-08 18:01:35 发布
最新推荐文章于 2024-07-08 18:01:35 发布
阅读量145 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/csdn2479993071/article/details/78096296
版权

这里写图片描述


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            body{
                margin: 0;
                padding: 0;
            }
            .cont{
                height: 10000px;
            }
            #top{
                position: fixed;
                width: 100%;
                height: 50px;
                top: 0px;
                left: 0px;
                background-color: pink;
                display: none;
            }

            #left{
                position: fixed;
                top: 150px;
                left: 20px;
                height: 500px;
                width: 50px;
                background-color: green;
                display: none;
            }
            #left ul{
                list-style: none;
                padding-left: 0px;
            }
            #left ul li{
                border: 1px solid gray;
                margin: 15px auto;
                height: 30px;
                line-height: 30px;
                text-align: center;
            }

            .a{
                border: 1px solid #FFFFFF;
                color: #FFFFFF;
            }

        </style>

        <script>

//          var a = 0;

            //滚动事件
            function myScroll(){
//              a++;

                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");

                //控制顶部
                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 = "";
                }else if(i>2500 && i<=3000){
                    f1.className = "";
                    f2.className = "a";
                    f3.className = "";
                    f4.className = "";
                    f5.className = "";
                }else if(i>3000 && i<=3500){
                    f1.className = "";
                    f2.className = "";
                    f3.className = "a";
                    f4.className = "";
                    f5.className = "";
                }else if(i>3500 && i<=4000){
                    f1.className = "";
                    f2.className = "";
                    f3.className = "";
                    f4.className = "a";
                    f5.className = "";
                }else if(i>4000 && i<=4500){
                    f1.className = "";
                    f2.className = "";
                    f3.className = "";
                    f4.className = "";
                    f5.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>
            </ul>
        </div>

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

    </body>
</html>
繁花落雨
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery滚动条下拉触底事件
angrynouse的博客
03-12 1910
JavaScript的jQuery框架，判断滚动条下拉触底或快要触底时，继续加载新内容，-50是为了容错，因为页面加载需要一定时间 //引入jQuery <script src="./js/jquery-3.6.0.min.js"></script> //CSS样式 <style> p{ height: 500px; } </style> </head> <body
JavaScript滚轮事件
weixin_43228946的博客
08-21 2854
现在，我们大概看下代码的具体逻辑。首先我们通过id获取div的对象d,接着给给d设置滚动事件 onmousewheel，接着我们要判断滚动的方向，event.wheelDelta > 0表示向上滚，event.detail < 0也表示向上滚，这里需要注意下event.wheelDelta不支持·火狐浏览器。如果我们在有浏览器中，在div里面进行滚动，浏览器的滚动给条也会跟着滚动，这样体验不太好。为了解决这个问题，我们在代码里返回false,就可以解决这个问题。还有一种情况，使用addEventListen
JS实现滚动条自动滚动（scrollTop）
陈浩然哦 的博客
06-18 3万+
js部分很简单：通过控制scrollTop的值来实现自动滚动效果； 注意（重点）： 1、scrollTop的值不可以加单位，谨记; 2、网页缩放比例会影响效果实现（下面具体说）； 3、如果这个元素没有被溢出，scrollTop为0； 4、设置的scrollTop值小于0，则scrollTop的值为0； 5、如果设置scrollTop的值超出了这个容器滚动的值，则scrollTop的值为容器最大...
js控制滚动条滚动
前端程序猿的博客
03-31 6604
JavaScript 可以通过操作scrollTop在上面的示例中，首先通过获取需要滚动的元素，然后设置scrollTop属性为需要滚动到的位置，即可实现控制滚动条滚动。如果需要平滑滚动，可以使用在上面的示例中，首先获取需要滚动的元素和目标位置，然后设置动画的持续时间。在scrollTo函数中，通过计算当前进度和位置，来实现平滑的滚动效果。在滚动动画未完成时，调用方法来继续滚动，直到动画完成为止。
javascript模拟滚动条实现代码
10-29
从csdn的blog上转过来的 做了些修改，其实写的比较糟糕(我指的是构造) 我用的是以前的一个drag类 在这个基础上在的来完成的Slider
基于JavaScript实现自定义滚动条
10-20
JavaScript实现自定义滚动条是一种常见的前端技术，它可以让开发者自定义滚动条的样式和行为，以适应网站或应用的特定设计需求。以下是一份详细解释如何使用JavaScript来创建自定义滚动条的指南。 首先，我们需要...
分享一则JavaScript滚动条插件
12-12
这是过年的时候自己写的js滚动条插件的源码，做出的效果自己并不满意，正因为做的并不满意所以回头重新巩固和深入学习js，这个插件有如下几个不太满意的地方： 内容的过度效果，可以参阅QQ客户端最近会话列表里的...
自定义滚动条美化jQuery插件
04-02
而滚动条美化jQuery插件则是在jQuery的基础上，专门针对滚动条功能进行优化和定制。传统的滚动条样式通常受限于浏览器默认设置，无法满足设计师对个性化和统一品牌风格的需求。该插件允许开发者自定义滚动条的外观，...
jsp中为表格添加水平滚动条的方法
10-21
在网页设计中，有时我们需要在表格中添加水平滚动条以便在数据过多时用户可以方便地浏览。在JSP（JavaServer Pages）中，这可以通过HTML和CSS，...通过设置适当的CSS样式和JavaScript操作，可以实现所需的滚动条效果。
js网页滚动条滚动事件实例分析
01-19
本文实例讲述了js网页滚动条滚动事件用法。分享给大家供大家参考。具体分析如下： 在做js返回顶部的效果时，要监听网页滚动条滚动事件，这个事件就是：[removed]。当onscroll事件发生时，用js获得页面的scrollTop值，判断scrollTop为一个设定值时，显示“返回面部” js网页滚动条滚动事件 <style type=text/css> #top_div{ position:fixed; bottom:80px; right:0; display:none; } </style> [removed] win
JQuery 随鼠标滚动条滚动的div
03-17
NULL 博文链接：https://solodu.iteye.com/blog/574857
JS网页滚动条滚动事件实例分析
liudanyang_21的博客
08-19 3376
js网页滚动条滚动事件的用法,在javascript中window.onscroll监控滚动条滚动事件的相关技巧 本文实例讲述了js网页滚动条滚动事件用法，具体分析如下： 在做js返回顶部的效果时，要监听网页滚动条滚动事件，这个事件就是：window.onscroll。当onscroll事件发生时，用js获得页面的scrollTop值，判断scrollTop为一个设定值时，显示“返回面部” js网页滚动条滚动事件 <style type="text/css"> #top_d.
jquery滚动条滚动事件_滚动条和jQuery –使用航点的事件处理
cuketao5066的博客
08-04 1021
jquery滚动条滚动事件How to handle scrolling with jQuery. Today we continue jQuery reviews, and our article will about event handling of scrollbar. Possible you saw such feature as ajaxy loading of new inform...
移动端显示滚动条以及滚动条的监听事件
qq_42709302的博客
09-05 2657
1、移动端显示滚动条 在移动端滚动条默认会隐藏，如何显示呢 ，需要添加以下代码了。并且需要给body或者外层盒子添加 rows 类名，这样滚动条就可以显示出来了 .rows { /* height: 500px; */ /* overflow: hidden; */ overflow-y: scroll; } .rows::-webkit-scrollbar-track-piece { background-color: rgba(0, 0, 0, 0
原生js监听滚动条滚动到底部
背着电脑走江湖的博客
10-30 3240
created(){ window.onscroll = function(){ //变量scrollTop是滚动条滚动时，距离顶部的距离 var scrollTop = document.documentElement.scrollTop||document.body.scrollTop; //变量windowHeight是可视区的高度 var win...
Html同页面内滚动跳转方法与监听滚动事件
clearlove_lwc的博客
10-25 1312
1. 同html页面滚动条跳转 TAB页设计及实现 document.getElementById("diskanchor").scrollIntoView(true); 注：diskanchor为html页面的锚点，scrollIntoView为true表示从上往下滚动值锚点位置，为false表示从下往上。 Angular实现: html: <div class = "plx-col-1" style="position:fixed;right:1px;padding-left:8px.
jquery 滚动条事件
清湮沐的博客
11-27 427
$("#title").hidden(); $("#title")首先为隐藏状态； $(function(){ $(window).scroll(function(){ if($(window).scrollTop() > 350 && $("#title").is(":hidden")){ $("#title").slideDown(300)
js监听html页面的上下滚动事件
热门推荐
阿亮
06-28 5万+
最近在一个项目中，在写前端页面的时候，想像以前做Android时在页面时刻监听上下滚动的事件，查找资料发现由鼠标或类似用户动作触发的事件有以下图示：不多说了，直接上代码了，经过测试可以使用：<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Dome</title> <sc
LibreOffice的国内镜像安装地址和node.js国内快速下载网站
最新发布
小丁的博客
07-08 140
国内镜像包网址：https://mirrors.cloud.tencent.com/libreoffice/libreoffice/
selenium 滚动条
08-19
但是，我们可以通过调用JavaScript脚本的方式来实现对滚动条的操作。<span class="em">1</span><span class="em">2</span><span class="em">3 #### 引用[.reference_title] - *1* *2* *3* [Selenium基础 — Selenium...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值