vue 监听滚动条距离顶部的距离_vue中监听滚轮滚动距离实现向下滚动一定距离后变成固定定位,向上滚动原来位置时取消绝对定位...

最新推荐文章于 2024-04-23 14:48:04 发布
最新推荐文章于 2024-04-23 14:48:04 发布
阅读量1.7k 收藏
点赞数 1
文章标签： vue 监听滚动条距离顶部的距离
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42515781/article/details/112955524
版权

该头部高度为328+margin-top:30px = 358

mounted() { window.addEventListener("scroll", this.handleScroll); }, methods: { handleScroll() { let scrollY = window.scrollY; let scrollObj = document.querySelector(".practice-right"); if (scrollY > 358) { //这个358就是上面的距离 scrollObj.style.position = "fixed"; scrollObj.style.right = "150px"; scrollObj.style.top = "0"; } else { scrollObj.style.position = "static"; scrollObj.style.marginTop = "0"; } } }

要实现的是这个右边的答题卡的定位

当滚动一定距离后自动绝对定位到顶部,当向上滚动回来时又取消绝对定位

一路走来516
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue监听滚动事件，实现某元素随着滚动条滚动固定距离顶部的某个位置（元素的top值实时变化）
日常笔记/总结/系列知识梳理
06-15 3万+
HTML <div class="fixed" id="searchBar"> </div> CSS fixed { position: fixed; bottom: 100px; top:
vue 监听滚动条距离顶部的距离_原生JS实现返回顶部动画效果
weixin_39598941的博客
12-03 1905
效果滚动条非匀速滚动，由快到慢效果。主要 api ,属性document.documentElement.scrollTop：获取滚动条距离顶部高度，给它赋值可以设置滚动条高度。浏览器支持度：支持谷歌， 火狐， IE10+setInterval 定时器基本思路点击返回到顶部按钮的时候，执行函数；函数首先获取当前滚动条距离顶部的高度，然后新建一个定时器；定时器内部执行document.documen...
vue中滚动页面到一定距离后固定
m0_46693606的博客
04-12 1648
1.id名为testNavBar的盒子与:class=’{ fixedNavbar: isfixTab }'的盒子可以是包含关系也可以是并列关系 <div id='testNavBar'></div> <div class="container " :class='{ fixedNavbar: isfixTab }'> </div> 或者 <div id='testNavBar'> <div :class='{ f
获取鼠标滚动条距离顶部的距离，判断滚动条是否触底（滚动条到底部）
最新发布
weixin_63515766的博客
04-23 240
获取鼠标滚动条距离顶部的距离，判断滚动条是否触底（滚动条到底部）
vue 返回顶部，滚动到位置固定
AS、SD的博客
06-16 353
1.返回顶部 //放在最顶部 <div ref='page'></div> ... ... <p class="top" @click="topage">返回顶部<img src="../../assets/activity/hwBrand/2.png"></p> // 返回顶部 topage(){ this.$refs.page.scrollIntoView({behavior: 'smooth', block: 'start'}) }
VUE实时监听元素距离顶部高度的操作
10-15
主要介绍了VUE实时监听元素距离顶部高度的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue 实现滚动到底部翻页效果(pc端)
10-16
在Vue.js中，实现PC端滚动到底部自动加载更多数据（翻页效果）是一种常见的优化用户体验的方法，尤其在处理大量列表数据时。这种效果通常被称为“无限滚动”或“滚动加载”。以下是一个详细的实现步骤： 1. **HTML...
vue实现全屏滚动效果（非fullpage.js）
10-15
总结起来，实现 Vue 全屏滚动效果的关键在于监听滚动事件，更新页面状态，并使用 CSS3 的 `transform` 属性平滑过渡页面。这种实现方式允许开发者自定义滚动行为，同时避免引入额外的库，提高项目的灵活性和性能。...
vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)
11-20
本文将详细介绍如何在 Vue 中实现滚动相关的功能，包括判断是否滚动到底部、滚动方向检测、滚动节流以及获取滚动区域的 DOM 元素。 ### 1. 是否滚动到底部 在 Vue 中，可以通过监听滚动事件并获取滚动区域的相关...
vue结合swiper实现演示--鼠标控制
12-30
为了实现“非传统滚动条式向下滚动”（即卡片式滚动），我们没有使用浏览器的默认滚动条，而是利用Swiper的滑动特性来模拟这一行为。这样，用户就可以享受到更加流畅且视觉上一致的滚动体验。 最后，确保在HTML结构...
滚动条插件
12-03
jQuery MCustomScrollbar 是一款功能强大的滚动条美化插件，它支持水平和垂直滚动条，提供了丰富的定制选项，包括滚动条的尺寸、颜色、滚动动画效果、鼠标滚轮和触摸设备的支持等。此外，该插件还具有自动调整大小、...
vue 中滚动条始终定位在底部的方法
10-18
今天小编就为大家分享一篇vue 中滚动条始终定位在底部的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue项目中实现监听滚动条滚动事件并滚动到固定位置
kjssjj12的博客
05-29 3310
vue项目中实现监听滚动条滚动事件并滚动到固定位置需求场景直接上代码THE LAST 需求场景 项目结构：vue node.js webpack 滚动条滚动到某处的时候 tab就切换成当前位置的值并且点击tab还能滚动到想要的位置，大概就是锚点跳转的意思。 直接上代码 这里必须是mounted下的，因为方法是要操作dom的，mounted就是挂载完dom树后执行的钩子 mounted() { wi...
vue的@scroll事件获取滚动条离顶部的距离
qq_42562004的博客
09-28 3138
// 绑定事件 <template @scroll.native="getScroll" ></template> //method 中定义 getScroll(event) { let top = event.target.scrollTop; console.log(top) }, // mounted中 mounted(){ window.addEventListener('scroll', this.getScroll,true) }.
VUE 滚动dom判断dom到顶部的距离，加定位
韩盼盼的小窝
02-24 862
mounted() { window.addEventListener('scroll', this.handleScroll) }, methods: { handleScroll() { var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop .
vue监听滚动条位置，并且使滚动条到指定位置
热门推荐
aiyang1214878408的博客
06-29 1万+
首先向页面添加滚动事件，可以实时获取到滚动条的位置 methods: { //滚动事件 handleScroll() { var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; var offsetTop = document.querySelector('#tabbarBox').offsetTop // 获取所需元素到
vue3中获取滚动条距离顶部位置
qq_43627232的博客
11-04 667
获取滚动条位置
vue 计算滚动距离顶部距离 改变背景色及文字
Mr_zrh的博客
09-20 318
【代码】vue 计算滚动距离顶部距离 改变背景色及文字。
vue如何通过滚动条滚动来获取滚动的距离
qq_47452289的博客
01-15 2146
vue如何通过滚动条滚动来获取滚动的距离 let element = document.getElementsByClassName('el-popper')[0] //根据类名来获取该节点 window.addEventListener('scroll', () => { let scrollTop = document.body.scrollTop //获取当前滚动条距离顶部的距离 console.log(scrollTop ) //
vue3 quasar 鼠标向左拉滚动条向左，鼠标向右拉滚动条向右，鼠标向上拉滚动条向上，鼠标向下拉滚动条向下
07-13
在Vue 3和Quasar中，你可以使用`@wheel`事件和`ref`来实现鼠标向左、向右、向上、向下滚动滚动条的效果。下面是一个示例代码： ```vue <!-- 内容 --> import { ref } from 'vue'; export default { ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值