Better-scroll导致的吸顶效果失效解决方案

最新推荐文章于 2024-08-18 10:54:05 发布
最新推荐文章于 2024-08-18 10:54:05 发布
阅读量992 收藏 2
点赞数
分类专栏： 笔记 文章标签： vue js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46567428/article/details/113445281
版权
在使用Better-scroll优化商品展示滚动时遇到了吸顶效果失效的问题。通过删除原有吸顶样式，创建一个隐藏的组件，当满足吸顶条件时使其显示，以此恢复吸顶效果。关键在于监听组件的offsetTop属性和轮播图图片加载，实现类似‘狸猫换太子’的解决方案。
摘要由CSDN通过智能技术生成

Better-scroll导致的吸顶效果失效解决方案

问题背景：

在supermall项目中为优化商品展示滚动性能，引入better-scroll框架，由于一些不太清楚better-scroll底层实现，导致tabControl.vue的吸顶样式失效。

原本设置的吸顶样式：(已失效)

position:sticky
top:44px;
left:0;
right:0;

为了恢复这种效果，可采用 狸猫换太子 的办法。

问题解决

思路：狸猫换太子
原样式可删掉（吸顶效果那部分）
在组件产生吸顶效果的地方复制一份该组件，初始状态不可见&#x

最低0.47元/天 解锁文章
coder-WJie
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue中将better-scroll封装成一个组件，并实现完美吸顶效果
鸭绒的博客
11-25 1405
先来看看实现的效果： 上面的效果就是利用了better-scroll实现的滑动，可见better-scroll实现的弹性效果还是很不错的，但是better-scroll还是有很多bug的，因此对初次使用better-scroll的人不够友好。以往我们做吸顶效果都是直接使用 position:sticky 实现粘性布局,但该属性在该库就失效了，因此吸顶也成了一件难题，还好有人想到了好办法解决了该问题，后面再说。 直接看封装好的better-scroll: <template> <div
使用 better-scroll 实现纵向横向双向滚动并设置吸顶
hello，是翠花呀
04-19 5317
使用 better-scroll 实现纵向横向双向滚动 需要达到的效果：右侧内容左右滚动时，左侧边栏不动，上下滑动时整体内容上下滚动 如图： 1.纵向滚动 安装并引入 import BScroll from 'better-scroll' 因为滚动默认是纵向的，所以不需要多设置其他参数 首先在 HTML 部分设置滚动外层容器（centent)和滚动内容(content-box)，设置外层 di...
better-scroll之吸顶效果巨坑挣扎中
dengweihuan4949的博客
04-05 455
今天和大家分享下better-scroll这款移动端用来解决各种滚动需求的插件（目前已经支持PC） 关于其中的API大家可以去官网看下 这里就给大家介绍几种常用的以及需要注意的点是什么 首先说一下better-scroll的使用注意问题吧 1、移动端 我们通常采用三段式进行布局的 例如 <div class="container"> ...
better-scroll切换栏吸顶效果
weixin_43294560的博客
07-31 1615
在better-scroll里使用position:sticky会无效,使用position:fixed定位会被better-scroll自身实现过程的tanslate给位移出去 解决方法: 做两个切换栏,一个在better-scroll外,一个在内,当达到临界值时,通过v-if指令,让内部隐藏,外部显示,外部可以使用postion:fixed达到吸顶的效果 代码示例: <template> <div class='home'> <NavBar title
better-scroll使用postion:sticky失效原因分析
Sam的博客
05-14 603
记录一个工作中遇到的很小的问题，**为什么postion:sticky在better-scroll的列表内部会失效？**。 先说结论：暂时无法解决这个问题，曲线救国使用cloneDom（克隆元素），通过滚动到顶部时，将隐藏在滚动区域外部的贴定元素显示出来。
Vue仿移动端喵喵电影项目解析
sea_510的博客
09-02 2110
项目预览地址：https://huyiling1111.gitee.io/myproject github源码地址：https文章目录技术栈项目大致分为7个页面 技术栈 vue-cli vuex vue-router mint-ui axios better-scroll iconfont swiper 项目大致分为7个页面 首页页面1（正在热映） 首页页面2（即将上演） 电影详情页面 电影详情页面（含弹出没有排期） 城市列表页面 电影院地址页面 我的页面 ...
better-scroll封装以后导致自定义吸顶效果失败
小啊dai
06-05 197
解决吸顶效果失效 获取tabControl的offsetTop 思路：必须知道滚到多少，开始有吸顶效果，这个时候就需要获取tabControl的offsetTop 但是如果直接在mounted中获取tabControl的offsetTop值是错误的（图片加载影响，异步） 正确加载获取offsetTop的值 监听图片加载，加载完后发送事件 <img :src="item.image" alt @load="bannerLoad" /> 监听图片加载完后的事件，获取offsetTop的值 sw
vue使用better-scroll实现菜单列表左右联动
07-13
而 Better-Scroll 是一个强大的滚动插件，它能帮助开发者在移动设备或者浏览器上实现高性能、易用的滚动效果。在本篇文章中，我们将深入探讨如何在 Vue 项目中利用 Better-Scroll 实现菜单列表的左右联动功能。 ...
vue better-scroll插件使用详解
08-28
本篇文章主要介绍了vue better-scroll插件的使用详解，better-scroll是一个移动端滚动的解决方案，它基于iscroll的重写，具有强大的功能，可以实现普通的滚动列表、轮播图、picker等等。 better-scroll的使用需要在...
Vue + better-scroll 实现移动端字母索引导航功能
08-27
Better-scroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。它的核心是借鉴了 iscroll 的实现，其 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。...
vue中使用better-scroll实现滑动效果及注意事项
10-17
总的来说，`better-scroll`为Vue应用提供了丰富的滚动解决方案，无论是垂直还是水平滑动，或是复杂的滚动联动效果，都能通过这个库轻松实现。在实际应用中，结合文档和示例，开发者可以根据需求灵活配置，打造个性化...
vue和better-scroll实现列表左右联动效果详解
10-17
【Vue和Better-Scroll实现列表左右联动效果详解】 在Web开发中，特别是在电商或信息展示类项目中，经常需要实现列表的联动效果，即当用户在一个列表中滚动时，另一个相关的列表也会相应滚动。Vue.js作为一款轻量级...
better-scroll之吸顶效果巨坑
tiankongxiao的博客
11-22 1470
1、移动端 我们通常采用三段式进行布局的 例如 <div> <header></header><main></main><fotter></fotter> </div> 假如我们利用弹性盒布局的话 给container 开盒子后我们一般给头部和尾部固定的高度 给main这个中间盒子一个...
使用Better-Scroll遇到的坑
q879936814的博客
04-28 2394
让绝对定位失效：之前做好的吸顶，用了position：sticky，但引入better-scroll就失效了，因为fixed定位的元素，如果父级有transform样式，值不为none，那么fixed定位就会失效，scale(),rotate()都会使fixed定位失效。这里使用offsetTop来获取滚动的高度，设计好滚到多少开始吸顶 引入bs之后要注意设置高度，wrapper一定要比内容高度...
Vue better-scroll实现详情页吸顶动画
weixin_60463255的博客
11-22 339
<header> <!-- 下滑50px后消失 --> <div class="header-returns" v-show="isShow"> <div> <i class="iconfont icon-fanhui"></i> </div> <div> <i class="iconfont.
2021-11-05 学习记录--Vue-tabControl的吸顶效果（yyds）
weixin_48850734的博客
11-05 545
tabControl的吸顶效果 一、最终效果 ???? 向下滚动中~???????? 二、项目分析 大家肯定想说：直接position:sticky;top:44px;z-index: 9;不就好了嘛，No，这种方式确实可行，但是此项目并非是浏览器原生滚动，而是用的betterScroll滚动，而position: :sticky;在betterScroll里面是没有效果滴 该如何实现呢？ 接下来，又有小可爱说，有啦，最常用滴方法就是：获取到tabControll的offsetTop，然后与bett
前端 实现吸顶的三种方式
Bigfishseasugar
07-07 7362
何为吸顶？吸顶就是随着页面滚动，某个元素在移动到顶部后便会固定下来，并且不会再因为页面继续滚动而消失。 常见应用于页面的Tab栏。以下是自己在学习过程中简单整理的三种吸顶方式（ 仅描述思路 ）。 一、position: sticky 设置粘性定位并且添加某个方位才可生效，但是兼容性较差。 二、动态修改元素的position 监听页面的滚动，比较 元素初始状态距离顶部的高度offsetTop 与 页面此时的滚动高度。当后者大于前者时，修改元素的position方式为fixed。 三、障眼..
vue 简单吸顶效果实现vue中sticky不起作用替代方案
空空墓志铭的博客
08-22 2374
vue项目中需要实现吸顶效果，但sticky不起作用，v-sticky插件也没效果，费了半天劲愣是没能实现。查阅资料后发现，sticky不生效原因有：1）父元素设置了overflow:hidden或者overflow:auto2）未指定top、right、bottom、left4个值中的任意一个3）父元素高度小于sticky定位的元素高度sticky属性依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。
网上商品订单转手系统bootpf
最新发布
weixin_43213064的博客
08-18 495
【代码】springboot网上商品订单转手系统bootpf
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值