移动端子元素定位，监听父级元素的scroll事件

最新推荐文章于 2023-03-07 18:43:04 发布
最新推荐文章于 2023-03-07 18:43:04 发布
阅读量566 收藏
点赞数
分类专栏： css 文章标签： java html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/gjsiaifa/article/details/103630561
版权

结构：
在这里插入图片描述
在这里插入图片描述
form是子元素，设置了定位top
父级元素高度写死，监听父级元素的scroll事件不生效
需要手动设置父级元素的overflow为scroll

vue监听滚动事件，实现某元素随着滚动条滚动固定距离顶部的某个位置（元素的top值实时变化）
日常笔记/总结/系列知识梳理
06-15 3万+
HTML <div class="fixed" id="searchBar"> </div> CSS fixed { position: fixed; bottom: 100px; top:
vue+element ui实现页面平滑滚动，滚动监听（导航栏根据内容块滑动改变状态）
Web_boom的博客
06-20 4042
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GU6sRH35-1655703819653)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/604927f19620433185e86d4bde706974~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image)]1.首先在子组件设置锚点如图中给与导航栏对应的四个div设置锚点id 2.在子组件编写滚动方法 监听路由的变化
scroll 监听
yezi_Z的博客
06-11 709
问题描述 ： 项目中使用了better-scroll库，同时想监听scroll事件的时候，发现无法监听到。 setTimeout(()=>{ this.initScroll(); this.scroll.on('scroll', ()=>{console.log('scroll' , )}, false) this.scrol...
最优-scroll事件的监听实现
大灰狼的小绵羊哥哥的博客
12-03 2989
关于scroll等类似高频率事件的最优实现攻略。 你会怎么实现一个监听HTML元素滚动到底部这个看起来很简单的函数方法？ 1. 背景和目标 前端在监听scroll这类高频率触发事件时，常常需要一个监听函数来实现监听和回调处理。传统写法上利用setInterval或setTimeout来实现。 为了减小CPU开支，往往需要节流函数，但是，interval的指定依旧是个难题。interval较...
jQuery和JavaScript和vue让子盒子滚动到父盒子的指定位置，包括设置scrollTop到指定位置的值为rem
weixin_44784401的博客
03-07 3926
jQuery和JavaScript和vue让子盒子滚动到父盒子的指定位置，包括设置scrollTop到指定位置的值为rem
vue js 监听页面滚动触底 && 监听iframe滚动及触底 && 带你搞清 offsetHeight，scrollTop，scrollHeight区别
Ms_alinda的博客
05-19 4463
想要监听页面滚动是否触底，你要先搞清offsetHeight，scrollTop，scrollHeight区别，以及如何让应用，话不多说上代码???????? offsetHeight： 它是包括padding、border、水平滚动条，但不包括margin的元素的高度。 ⚠️：对于行内元素这个属性值一直是0，单位px，是只读元素。 scrollTop：表示在有滚动条时，滚动条向下滚动的距离也就是元素顶部被遮住部分的高度即“卷”起来的高度。 ⚠️：在无滚动条时scrollTop==0恒成立，单位
vue使用@scroll监听滚动事件时，@scroll无效问题的解决方法详解
12-13
本文实例讲述了vue使用@scroll监听滚动事件时，@scroll无效问题的解决方法。分享给大家供大家参考，具体如下： 在网上看了一下vue中监听滚动条滚动事件，清一色的使用document.addEventListener('scroll',function()...
vue实现某元素吸顶或固定位置显示（监听滚动事件）
08-28
1. 监听滚动事件（`scroll`事件）：在Vue中，我们可以使用`mounted`生命周期钩子函数，在该函数中添加滚动事件监听器。当页面加载完毕并且DOM被渲染后，通过`window.addEventListener('scroll', this.handleScroll)`...
使用vue.js在页面内组件监听scroll事件的方法
10-18
本文将介绍如何在Vue.js中实现页面内组件监听scroll事件的功能。 首先，需要明确的是，当我们在页面中监听滚动事件时，一般情况下我们会想到使用JavaScript的`window.addEventListener`方法来添加滚动事件监听器。...
CSS scroll-snap滚动事件停止及元素位置检测实现
12-13
**CSS Scroll Snap 滚动事件停止及元素位置检测实现** **一、CSS Scroll Snap 特性介绍** CSS Scroll Snap 是一种强大的前端技术，它允许网页容器在滚动时自动平滑地定位到指定元素的位置，无需JavaScript的干预。...
一个VUE组件子元素scroll父元素容器不跟随滚动兼容PC移动端
08-09
一个 VUE 组件：子元素 scroll 父元素容器不跟随滚动（兼容PC、移动端）
Vue 父子组件 监听scroll事件
独孤听雨
05-02 4233
借助ref实现dom操作，借助eventHub实现消息传递1. 监听scroll事件如果 父子组件  嵌套  在父组件上 存在滚动前提：父容器设置：overflow-y:scroll，子组件、孙子组件等未设置 则需在父组件上监听滚动事件有效，在子组件、孙子组件中监听无效， 在父组件 设置一个 ref="viewhome"； 在父组件的 mounted中设置： this.boxHome = this...
移动端 监听滚动事件 且 监听惯性
夜惊如水
08-23 2637
var timer = null; var timer1 = null; window.addEventListener('touchstart',function(e){ var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; var containerH = $('img')....
Vue.js手机端scroll事件的坑
热门推荐
Iohboel的博客
11-06 1万+
延续之前的Vue.js的手机端开发，在滚动事件的时候遇到了很多问题，纪录下来，有的问题已经解决，有的留个坑，以后慢慢填～ 主要包括 iOS滚动混用   几个都有滚动的页面，在一个页面的滚动位置在链接到下一个页面的时候，新页面的滚动位置会被置为上一个页面的滚动位置。 iOS滚动页下面出现大面积空白   当列表页进入到一个较长的详情页面时，详情页下拉到底部，看完之后返回时，列表页为空，内容移
js 监听移动端web触屏事件 滑动响应
weixin_30426879的博客
03-24 726
直接上例子，以vue应用为例： html: <ul> <li v-for="item in items" :class="{finished:item.isFinished}" @click="toggleFinish(item)" @touchstart="touchstart()" @touchmove="touc...
Div 高度、滚动条距 Div 顶部偏移量、Div 中文档总高度
蚩尤后裔-汪茂雄
11-27 6142
目录 示例图说明 编码示例 回到顶/底部 消息区自动滚动到底部 示例图说明 如上图所示，假设橙色表示滚动条，蓝色框表示 div 区域，黑色区域表示看不到的文档部分，高度说明如下： B：表示 div 元素高度，div 的高度不会随着内容的编号而编号，与有没有出现滚动条无关，只与自己的 height 属性有关 A：表示 div 内文档高度，当没有出现滚动条时，A文档高度...
简单粗暴方式解决H5移动端页面滚动的时候触发touchend事件
xiaoqiangbigbrother的博客
07-23 8653
H5移动端的页面在安卓和IOS微信内置浏览器中呈现的形式不一样,所以我统一采用touch事件代替click事件 1，touchstart事件触发的时候设置全局变量（名字随便取）flag = 1； 2，touchmove事件触发的时候设置 flag = 0； 3，touchend事件触发的时候判断flag值 当flag = 1 的时候触发touchend事件里面的函数，触发完以后在末尾再设置f...
关于div相对于父级盒子实现绝对定位position:fixed的效果
ggggd233的博客
05-15 2738
style中加入：position: sticky; 添加top、bottom、left、right任意一个属性即可生效
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

yc99

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值