onscroll事件揭秘&&模拟下拉滚动条效果

最新推荐文章于 2023-04-28 08:15:00 发布
最新推荐文章于 2023-04-28 08:15:00 发布
阅读量3.3k 收藏 1
点赞数 1
分类专栏： web前端学习 文章标签： onscroll事件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/libin_1/article/details/50534591
版权

这里写图片描述

下载：http://download.csdn.net/detail/cometwo/9407895

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
        <title></title>
        <style type="text/css">
            body,
            html {
                height: 2000px;
                width: 100%;
                margin: 0px;
                top: 0px;
                padding: 0px;
                left: 0px;
            }

            .class1 {
                width: 300px;
                height: 300px;
                background: black;
                position: fixed;
                color: red;
                border: 1px solid blue;
                font-size: 16px;
                margin: 10px;

            }
        </style>
        <script type="text/javascript">
            $(function() {
                $(window).scrollTop('500'); //设置滚动条初始位置
                $(window).scrollLeft('5');
                window.onscroll = function() {
                    if ($(window).scrollTop() > 600) {
                        $('.class1').slideUp('slow');
                    }else {
                        $('.class1').fadeIn(5000);
                    }
                    $('.class1').html('滚动条top:' + $(window).scrollTop() + '</br>' + '滚动条left:' + $(window).scrollLeft());
                    //$('.class1').html($('.class1').html()+'</br>滚动条top:' + $(window).scrollTop() + '</br>' + '滚动条left:' + $(window).scrollLeft());
                }
            })
        </script>
    </head>

    <body>
        <div class="class1">

        </div>

    </body>

</html>
<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
        <title></title>
        <style type="text/css">
            body,
            html {
                height: 2000px;
                width: 100%;
                margin: 0px;
                top: 0px;
                padding: 0px;
                left: 0px;
            }

            .class1 {
                width: 300px;
                height: 300px;
                background: black;
                position: fixed;
                color: red;
                border: 1px solid blue;
                font-size: 16px;
                top: 40px;
                left: 100px;
            }
        </style>
        <script type="text/javascript">
            $(function() {
                $(window).scrollTop('500'); //设置滚动条初始位置
                $(window).scrollLeft('5');
                $(window).scroll(function() {
                    if ($(window).scrollTop() > 600) {
                        $('.class1').slideUp('slow');
                    } else {
                        $('.class1').fadeIn(5000);
                    }
                    $('.class1').html('滚动条top:' + $(window).scrollTop() + '</br>' + '滚动条left:' + $(window).scrollLeft());
                    //   $('.class1').html($('.class1').html()+'</br>滚动条top:' + $(window).scrollTop() + '</br>' + '滚动条left:' + $(window).scrollLeft());
                })
            })
        </script>
    </head>

    <body>
        <div class="class1">

        </div>

    </body>

</html>

这里写图片描述

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
        <title></title>
        <style type="text/css">
            body,
            html {
                height: 2000px;
                width: 100%;
                margin: 0px;
                top: 0px;
                padding: 0px;
                left: 0px;
            }

            .class1 {
                width: 300px;
                height: 300px;
                background: black;
                position: fixed;
                color: red;
                border: 1px solid blue;
                font-size: 16px;
                top: 40px;
                left: 100px;
            }
        </style>
        <script type="text/javascript">
            $(function() {
                var i = 0;
                var setin = setInterval(function() {
                    if ($(window).scrollTop() < 500) {
                        $(window).scrollTop(i++); //设置滚动条初始位置
                    } else {
                        clearInterval(setin);
                    }
                    $('.class1').html('滚动条top:' + $(window).scrollTop() + '</br>' + '滚动条left:' + $(window).scrollLeft());
                }, 50)
            })
        </script>
    </head>

    <body>
        <div class="class1">

        </div>

    </body>

</html>
最骚的就是你
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery的滚动条事件插件jquery-waypoints
08-07
效果类似淘宝商品页面的评价导航条，在下拉滚动条过程中固定到顶端。 还有微博那样的无限滚动，滚动条下拉触发事件
javaScript实现滚动条事件详解
10-19
JavaScript 滚动条事件是网页开发中常用的一种交互方式，它允许开发者在用户滚动页面时执行特定的函数。在本篇文章中，我们将深入探讨如何使用 JavaScript 来监听和处理滚动条事件，以及如何通过这些事件来改变页面...
JS滚动条下拉事件
weixin_34184561的博客
09-17 814
<script type="text/javascript"> window.onscroll = function(){ var t = document.documentElement.scrollTop || document.body.scrollTop; var oDiv = document.getElementById( "div" );...
滚动事件监听 onscroll所实现的效果
qq_42454206的博客
07-17 1658
&lt;script&gt; window.onscroll = function() { console.log("1111") } &lt;/script&gt;
window.onscroll页面滚动条滚动事件
weixin_34380296的博客
09-05 480
用途一："返回顶部"； window.onscroll = function(){ var t = document.documentElement.scrollTop || document.body.scrollTop; var top_div = document.getElementById( "top_div" ); if( t &gt;= 3...
onscroll 实现随滚动条浮动的层
weixin_30824479的博客
09-01 69
<body> <script language="javascript"> window.onscroll=function(){ //document.getElementById("divLeft").style.left=100+parseInt(document.body.scrollLeft) + "px";//水平浮动,竟然是上下浮动就不需要...
js操作滚动条事件实例
10-24
JavaScript操作滚动条事件是网页动态效果中常见的技术，它允许开发者根据用户滚动页面的行为执行相应的功能。本实例主要探讨了如何使用JavaScript监听和处理滚动条事件，以及在实际应用中的技巧和注意事项。 首先，...
js网页滚动条滚动事件实例分析
01-19
在做js返回顶部的效果时，要监听网页滚动条滚动事件，这个事件就是：[removed]。当onscroll事件发生时，用js获得页面的scrollTop值，判断scrollTop为一个设定值时，显示“返回面部” js网页滚动条滚动事件 <...
onscroll事件揭秘
01-18
3. **滚动动画**：通过`onscroll`事件，可以在用户滚动时创建流畅的视差效果或者元素淡入淡出等动画效果。 4. **滚动监听**：可以用来跟踪用户在页面上的浏览位置，为个性化推荐或者数据分析提供依据。 5. **滚动...
vue 监听某个div垂直滚动条下拉到底部的方法
12-10
如下所示： this.$nextTick(() => { const el = document.querySelector('.act-not'); const offsetHeight = el.offsetHeight; el.onscroll = () => { const scrollTop = el....坑：在做滚动加载分页时候，有时候第三
jquery 实现滚动条下拉时无限加载的简单实例
11-22
思路： 通过捕捉浏览器滚动条下拉事件，触发异步加载数据的js方法，实现数据的动态添加。 脚本： var lastId=0;//记录每一次加载时的最后一条记录id，跟您的排序方式有关。 var isloading = false; $(window).bind("scroll", function () { if ($(document).scrollTop() + $(window).height() > $(document).height() - 10 && !isloading) { isloading = true; getM
Vuejs支持移动端touch事件滚动循环列表
08-07
Vue.js支持移动端touch事件滚动循环列表
滚动条下拉触发事件
Byte_Dance的博客
12-23 4891
如果想要使下拉滚动条到底部的时候就触发事件,可以这样写: 返回顶部的按钮除了用css添加锚点外,还可以使用JS这样写:
模拟滚动条的实现
m0_50855143的博客
09-16 505
冲冲冲 在实现滚动条之前，我们得先理清楚几个概念问题： 属性名称 说明 clientX 点击位置距离当前body可视区域的x坐标 clientY 点击位置距离当前body可视区域的y坐标 screenX 点击位置距离当前电脑屏幕的x坐标 screenY 点击位置距离当前电脑屏幕的y坐标 pageX 对于整个页面来说，包括了被卷去的body部分的宽度 pageY 对于整个页面来说，包括了被卷去的body部分的高度 offsetX
滚动条事件
AndrewNeo
05-08 536
width() - 设置或返回元素的宽度。不包含margin、padding和border; height() - 设置或返回元素的高度。不包含margin、padding和border; innerWidth() - 返回元素的内部宽度，包含 padding，但不包含margin和border; innerHeight()-返回元素的内部高度，包含padding，但不包含margin和bo...
JavaScript之onscroll事件
arvin_top的博客
04-15 6697
onscroll事件 •是页面滚动条滚动事件，当页面滚动条滚动时候，自动触发 •如果页面没有滚动条或者没有发生滚动操作，则不会执行onscroll事件 •从属于window对象，事件应绑定到window对象上 scrollTop和scrollLeft •当页面内容区域超出了浏览器展示范围，页面会出现滚动条 •scrollTop指的是向上滚动头部高度 •scrollLeft指的是向
js onscroll android,JavaScript触发onScroll事件的函数节流详解
weixin_32965939的博客
05-27 259
问题描述常见的网站布局，顶部一个导航栏，我们假设本页面共有四个栏目：分别为A、B、C、D，我们点击A，锚点跳转至A栏目，同时顶部的A按钮高亮；点击B，锚点跳转至B栏目，同时顶部的B按钮高亮；我们在Main组件里面滚动，滚动到B模块时，B按钮高亮。以上是我们经常会在开发中遇到的一个模型。如果是在以前，用jQuery作前端开发的话，实在是太熟悉不过了。解决方案主要想谈谈在React组件化开发中的性能优...
vue性能优化之虚拟列表滚动
老电影故事的博客
04-28 2941
前端的性能瓶颈那就是页面的卡顿，当然这种页面的卡顿包含了多种原因。例如HTTP请求过多导致数据加载变慢，下载的静态文件非常大导致页面加载时间很长，js中一些算法响应的时间过长等。很多前端工程师都花费很多的精力在dom渲染上来优化页面加载。
vue项目中onscroll的坑
u010227042的博客
11-04 1838
vue项目中onscroll的坑 在项目中需要监听一个组件的scroll事件，以触发到底时加载更多。 但是实际操作下来发现scroll事件并没有被监听到。 通过查询资料得知，监听的目标元素element的scroll事件不冒泡。 解决scroll绑定失败的方法是：scroll直接绑定在window的捕获阶段； window.addEventListener(‘scroll’,methodName，true); 还有另外一个方式： 使用谷歌浏览器的开发者工具 performance 录制滚动动作，在event
jQuery滚动条事件该如何写
最新发布
06-07
在jQuery中，可以使用`scroll()`方法来监听滚动条事件。该方法会在滚动时被调用，并且会传递一个事件对象作为参数。 下面是一个简单的示例，当用户滚动页面时，页面顶部将显示当前滚动位置的数值： ```html <!DOCTYPE html> <html> <head> <title>jQuery Scroll Event Example</title> <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function() { $(window).scroll(function(event) { var position = $(this).scrollTop(); $("#scrollPosition").html("Current scroll position: " + position); }); }); </script> </head> <body> <h1>jQuery Scroll Event Example</h1> <p>Scroll down to see the current scroll position:</p> <div id="scrollPosition"></div> </body> </html> ``` 在上面的代码中，我们使用了jQuery的`scroll()`方法来监听滚动条事件。在`scroll()`方法中，我们获取当前滚动位置的数值，并将其显示在页面顶部的`div`元素中。 与JavaScript的`onscroll`事件不同，jQuery的`scroll()`方法需要在文档准备就绪后才能使用，因此我们在`$(document).ready()`方法中定义了事件处理程序。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值