页面滚动事件

最新推荐文章于 2024-09-04 20:18:34 发布
最新推荐文章于 2024-09-04 20:18:34 发布
阅读量118 收藏
点赞数 1
分类专栏： js核心 文章标签： javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lianghuan9/article/details/137256202
版权
该篇文章介绍了如何利用JavaScript的事件监听功能，当网页滚动超过一定高度时，使特定的<div>元素隐藏，从而实现动态的隐身效果，涉及DOM操作和CSS样式控制。
摘要由CSDN通过智能技术生成

<body>

  <div>我会隐身</div>

  <script>

    const div=document.querySelector('div')

    window.addEventListener('scroll',function () {

      const n=document.documentElement.scrollTop

      console.log(n);

      if(n>=10){

        div.style.display='block'

      }else{

        div.style.display='none'

      }

    })

  </script>

</body>

</html>

良崽￥
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
滚动事件
weixin_50726569的博客
11-27 1839
1.滚动事件 当页面滚动到底部时,将input框设置为disabled = false 为info绑定一个滚动事件 info.onscroll = function(){ console.log("scrollHeight"+info.scrollHeight) console.log("scrollTop"+info.scrollTop) console.log("clientHeight"+info.clientHeight) if(info.scrollHeight - info.sc
页面滚动
qq_45744618的博客
09-28 111
页面滚动 <view class="huandeng"> <swiper indicator-dots="true" autoplay="true" interval="5000"> <block wx:for="{{imgUrls}}" wx:key="key"> <swiper-item> <image src="{{item}}"></image> </swiper-item>
vue 监听页面滚动事件
weixin_49790897的博客
09-10 1068
【代码】vue 监听页面滚动事件。
vue监听页面滚动事件
热门推荐
hyduan_h5的博客
05-07 2万+
方法：监听滚动实现 通过addEventListener方式监听 通过scroll获取到滚动 export default { data () { return { topNavBg: { backgroundColor: '' } } }, // 滚动监听 mounted () { window.addEventListener('scroll', this.handleScroll) // 监听页面滚动 }, met
JS原生监听页面滚动事件
m0_69091610的博客
09-11 1735
表示监听页面滚动事件。第二个参数是一个匿名函数，用来定义事件发生时的回调函数。当页面发生滚动时，就会触发这个回调函数执行。方法用于给指定的元素或对象添加事件监听器。第二个参数是事件发生时要执行的回调函数。第一个参数是要监听的事件类型，比如。在你的代码中，第一个参数是。配合css实现滚动.
JQuery获取元素尺寸、位置及页面滚动事件应用示例
11-28
本文实例讲述了JQuery获取元素尺寸、位置及页面滚动事件应用。分享给大家供大家参考，具体如下： 获取元素尺寸 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title...
vue项目监听页面滚动事件
weixin_45484574的博客
09-29 1946
vue监听页面滚动事件 mounted() { // 监听滚动事件，用handleScroll这个方法进行相应的处理 window.addEventListener("scroll", this.handleScroll); }, methods: { handleScroll() { // 监听到页面滚动后的处理事件 if (window.pageXOffset > 280) { this.showLeft = true;
安卓动画效果相关-SCViewPager基于页面滚动事件产生动画.rar
07-29
SCViewPager是基于页面滚动事件来实现动画效果的一个组件，它能够为应用的界面增加动态交互，提高用户与应用的互动性。下面将详细介绍SCViewPager的工作原理、特点以及如何利用它来创建动画效果。 1. **SCViewPager...
页面滚动事件与节流
dokill的博客
07-28 3859
scrollTop
解决Vue页面固定滚动位置的处理办法
08-30
浏览器的滚动位置恢复行为可以分为两个步骤：在hashchange事件触发时，浏览器会拿到当前页面的document.body.scrollTop值，并与自己存储的滚动条位置进行比较，取最小的值，设置成当前的document.body.scrollTop值。...
JS都有哪些操作数组的方法
最新发布
ggq53219的博客
09-04 378
JavaScript 中操作数组的方法非常丰富，这些方法大致可以分为几类：创建和初始化数组、添加元素、删除元素、遍历数组、搜索元素、数组排序、数组映射和过滤等。
Vue的状态管理——Vuex3&4&Pinia
警警的博客
08-30 2508
Pinia是Vue.js 3.x的状态管理库，它可以看作是Vuex的升级版，旨在提供一种更简单、更直观的方式来管理Vue.js应用程序的状态。Vuex 4是Vue.js 3.x版本的状态管理库，它在Vuex 3的基础上进行了多项改进和优化，使其更加适用于大型应用和复杂场景。Vuex 3是Vue.js 2.x版本的状态管理库，它提供了一种集中式存储和管理组件状态的方式。：在 Vue 3 项目中，你通常会使用 Vuex 4 或 Pinia 而不是 Vuex 3。在 Vue 3 项目中，你可能会在。
从面向对象(OOP)到面向切面(AOP)：编程范式的演变
妍思码匠的博客
08-30 1379
本文深入探讨了面向切面编程（AOP）在前端开发中的应用，解释了AOP如何通过动态增强与代码复用、降低模块间耦合度，为前端项目带来更高效、更模块化的解决方案。通过具体案例分析，如日志记录切面和动态埋点的实现，展示了如何利用装饰器模式、高阶组件等技术在前端实现AOP。理解AOP的原理与实践，将有助于开发者构建更易于维护和扩展的前端应用。无论你是前端新手还是资深开发者，本文都将为你提供有价值的见解和实用技巧。
vue3使用-watch监听总结
weixin_44072254的博客
09-01 491
{deep: true, immediate: true, flush: 'post'}：deep是深度监听；flush:如果想在侦听器回调中能访问被 Vue 更新之后的所属组件的 DOM就用'post'，sync'创建一个同步触发的侦听器，它会在 Vue 进行任何更新之前触发；flush: 'post'， 如果想在侦听器回调中能访问被 Vue 更新之后的所属组件的 DOM就用'post'flush: sync'，创建一个同步触发的侦听器，它会在 Vue 进行任何更新之前触发。监听数组的方式-示例。
vue3+vant4父组件点击提交并校验子组件form表单
liuzaixi的博客
08-30 485
方法进行表单验证，如果验证通过则执行提交逻辑。获取子组件的引用，在父组件的点击事件中调用子组件的。这样父组件就可以通过。调用子组件的验证方法了。
vue part 5
E___V___E的博客
08-29 935
生命周期：1 .又名：生命周期回调函数、生命周期函数、生命周期钩广。2 .是什么：Vue在关键时刻用我们调用的一些特殊名称的函数。3•生命周期函数的名字不可史改，但函数的具体内容是程序员根据需求编写的.4 .生命周期函数中的this指向是vm或组件实例对象。
Nginx部署前端Vue项目
不会代码的小林
09-03 786
Nginx是一款轻量级的高性能Web服务器，可以用于静态文件的托管和反向代理等场景。现在，您可以在浏览器中访问http://example.com（请替换为您自己的域名），应该可以看到Vue应用程序正在运行。请将example.com替换为您自己的域名，将/var/www/my-project/dist替换为Vue项目的dist目录的实际路径。现在，我们需要配置Nginx来托管Vue项目的静态文件。接下来，我们可以使用Vue CLI创建一个新的Vue项目。在部署之前，我们需要先构建Vue项目。
基于Java+Springboot+Vue+elememt宠物用品商城系统设计实现
央顺科技官方博客
08-31 1371
随着信息技术的不断发展，我们现在已经步入了信息化的时代了，而信息时代的代表便是网络技术的日渐成熟，而现在网络已经和我们的生活紧密的联系起来了，我们不敢想象没有网络我们的生活会像怎么样，也许就像食物中没有调料现在的生活离开了网络会变得索然无味。通过网络我们可以足不出户的做许多事情，例如工作、娱乐、学习，交友和购物等等许多我们数之不尽的事情，而就是因为网络我们的生活变得多姿多彩，或许有时甚至帮我们省下不少的时间和给予了我们更多的机遇。宠物网上商城对我们来说就有这些意义。
ES配合高德地图JS-API实现地理位置查询
maohe的博客
08-29 1236
使用高德地图组件获取商户详细地址和地理坐标（经纬度）存入ES中，然后获取当前用户的地理坐标位置，用户可定义查询半径，用来搜索以用户位置为中心点，指定半径构成搜索圆形区域，搜索出包含在圆形区域内的商户（信息包含排序后的距离）。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值