js实现同步滚动相关问题， scroll-behavior: smooth

最新推荐文章于 2023-12-28 16:07:00 发布
最新推荐文章于 2023-12-28 16:07:00 发布
阅读量1.1k 收藏
点赞数 1
分类专栏： Javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Luzhufeng_/article/details/106763922
版权

记一次实现同步滚动的遇到的一个问题

scroll-behavior: smooth 在mac上的效果是滚动后还能平滑慢慢的滚动一段距离才停，体验很棒，但是却带来一个小问题

如果两个滚动区域用了 scroll-behavior: smooth，滚动时就会出现抖动问题，这个问题我认为是和性能有关，因为用了这个css属性后，虽然体验起来更加丝滑，但是浏览器的滚动监听并不能很好的去捉去滚动后惯性般的慢慢滑动效果的那段距离，导致同步另一个滚动区的时候和当前滚动区的px不相等，看起来有卡顿的感觉。
所以去掉改css效果再去调试，就会一帆风顺了~ 😁

 

向阳而生，护梅使者
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react-anchor-link-smooth-scroll:使用平滑滚动polyfillReact锚链的组件
05-02
React锚链接平滑滚动 使用React锚链的组件。 指示 安装依赖项： npm install react-anchor-link-smooth-scroll 添加脚本 import React from 'react' import ReactDOM from 'react-dom' import AnchorLink from '...
[css] 使用overflow: scroll时不能平滑滚动怎样解决？
歌谣的博客
02-09 1140
[css] 使用overflow: scroll时不能平滑滚动怎样解决？ scroll-behavior: smooth; 个人简介 我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易， 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题 ...
scroll-behavior让页面滚动更流畅
lsw
03-24 213
html { scroll-behavior:smooth; }
js：scroll平滑滚动页面或元素到顶部或底部的方案汇总
彭世瑜的博客
07-12 9956
可能在部分老旧设备上存在兼容性，从网上收集了一个多设备支持的缓冲方案margin : 0;
页面平滑滚动：scroll-behavior&scrollIntoView
HELLO WORD
11-07 5159
从前我们在网页中会需要内容定位，或者返回顶部之类的功能，通常使用锚点来实现，但是页面跳转太过生硬，用户体验不够，于是会通过一大串的js来实现平滑滚动的效果，近两年出现了一些新的属性可以很方便的完成这种交互，很大程度的减小了开发难度。 一、CSS：scroll-behavior 约莫是去年开始出现的这个属性，只需要在需要滚动的地方增加一行如下属性，即可。 scroll-behavior:smooth...
scrollIntoView 滑动卡顿或scrollIntoView不生效问题
smz8023的博客
01-19 7213
在实际生产中遇到scrollIntoView滑动卡顿现象； dom.scrollIntoView({ behavior: "smooth", block: "nearest", //"start",// | "center" | "end" | "nearest", // 默认 inline: "nearest" ...
vue实现两个区域滚动条同步滚动
qq_54126505的博客
03-24 1653
vue实现两个区域滚动条同步滚动
({behavior: ‘smooth‘ }) 在移动端不生效的问题解决 ios不平滑
至_臻的博客
07-13 2158
第一步：安装这个插件 npm i smoothscroll-polyfill 第二步：在你需要解决问题的页面引入 import smoothscroll from 'smoothscroll-polyfill'; 第三步：执行这个方法(就是在你用behavior:'smooth'的事件里面写入) smoothscroll.polyfill(); 这样就可以解决behavior: 'smooth' 在手机上不平滑的问题了 ...
scroll-behavior:可插拔的浏览器滚动管理
04-30
import ScrollBehavior from 'scroll-behavior' ; /* ... */ const scrollBehavior = new ScrollBehavior ( { addNavigationListener , stateStorage , getCurrentLocation , /* shouldUpdateScroll, */ } ) ; /...
react-scroll-sync:跨多个可滚动元素的同步滚动位置
05-11
React滚动同步 跨多个可滚动元素的同步滚动位置 演示 文档和示例 执照 麻省理工学院 安装 npm install --save react-scroll-sync 用法 import React , { Component } from 'react' ; import { ScrollSync , ...
scroll-data:获取当前滚动方向，位置和速度。 垂直和水平
05-18
滚动数据获取当前滚动方向，位置和速度。 垂直和水平方向。 对于根据滚动方向和速度显示/隐藏顶部导航栏非常有用。安装npm install --save scroll-data用法首先需要该模块。 const ScrollData = require ( 'scroll-...
scroll-animation:根据滚动位置对元素进行动画处理
04-28
滚动动画根据滚动位置对元素进行动画处理。 受和启发。 哦，不，为什么还要另一个视差脚本？ 我们真的需要吗？ 我找不到适合我需要的npm软件包： 动画任何DOM属性的能力使用进行表演暂时挂起以最大程度地减少负载...
原生JS实现页面平滑滚动
热门推荐
Jay的博客
01-27 1万+
前言 页面平滑滚动是网页一种常见的效果。那如何用原生的JS实现这也效果呢？ 原理 平滑滚动的原理其实很简单。无非就是让页面一种肉眼可见的速度从当前位置滚动到指定位置。故而，要实现平滑滚动效果，我们就要知道“起始位置”、“结束位置”以及“如何让页面从一个点到另一个点”。 获取起始位置和终点位置 想要获取起始位置和终点位置，那就必须确定参考点。在网页中，常用的参考点是页面左上角。（注意，我这里所要实现...
解决移动端scrollTo({behavior: “smooth“})滑动效果失效的问题
liucai1018的博客
05-14 7112
js自带的scrollTo方法可以设置动画，滚动的效果，代码在电脑上正常，但是在手机上的时候就没有smooth的滑动效果了，只能僵硬的跳到某个位置，类似scrollTop赋值的效果，这里从一个博客看到的一个解决办法，试了下确实可以，所以记录一下： 首先安装这个插件：smoothscroll-polyfill npm install smoothscroll-polyfill --save 然后引入并在组件创建的时候调用下这个方法：比如mounted中 import smoothscroll fr
scrollview滑动跟侧滑的冲突
飞落的眼泪的专栏
07-21 1893
现在侧滑这个框架是非常的流行，几乎所有的app都囊括了这个东西，如果你的app不是用的这种框架都会让人感觉很生硬。然而拥有了侧滑效果以后，我们还想同时照常使用我们的滑动scrolview和tableview等效果。这个时候冲突就会产生。由于代码并不多，所以直接上代码写出来，大家就可以直观的看出如何解决滑动的冲突的。-(BOOL)gestureRecognizer:(UIGestureRecogniz
Html的scroll-behavior: smooth与div滚动冲突问题
KingKaiGe的博客
12-28 1030
异常问题页面通过描点链接进入锚点区域（html使用了），在页面滚动触发对页面内容的显示区域监听，去导航栏中滚动到指定位置。
javascript:window.scroll()函数behavior属性smooth属性值在iphone浏览器上不兼容
weixin_46639278的博客
12-28 2443
javascript:window.scroll()函数behavior属性smooth属性值在iphone浏览器上不兼容 在制作静态页面的时候，使用window.scroll()来实现点击爬楼的事件，一开始是这样写的 let height = 500 //需要跳转到的高度 this.window.scroll({ “top”:height, “behavior”:“smooth” }） 在安卓手机的浏览器上是可以实现的，但是一用苹果浏览器打开，当我点击触发事件时， “behavior”:"smooth"
地县级城市建设道路清扫保洁面积 道路清扫保洁面积道路机械化清扫保洁面积 省份 城市.xlsx
最新发布
06-22
数据含省份、行政区划级别（细分省级、地级市、县级市）两个变量，便于多个角度的筛选与应用 数据年度：2002-2022 数据范围：全693个地级市、县级市、直辖市城市，含各省级的汇总tongji数据 数据文件包原始数据（由于多年度指标不同存在缺失值）、线性插值、回归填补三个版本，提供您参考使用。 其中，回归填补无缺失值。 填补说明： 线性插值。利用数据的线性趋势，对各年份中间的缺失部分进行填充，得到线性插值版数据,这也是学者最常用的插值方式。 回归填补。基于ARIMA模型，利用同一地区的时间序列数据，对缺失值进行预测填补。 包含的主要城市： 通州 石家庄 藁城 鹿泉 辛集 晋州 新乐 唐山 开平 遵化 迁安 秦皇岛 邯郸 武安 邢台 南宫 沙河 保定 涿州 定州 安国 高碑店 张家口 承德 沧州 泊头 任丘 黄骅 河间 廊坊 霸州 三河 衡水 冀州 深州 太原 古交 大同 阳泉 长治 潞城 晋城 高平 朔州 晋中 介休 运城 永济 .... 等693个地级市、县级市，含省级汇总 主要指标：
scroll-behavior: smooth;
03-16
scroll-behavior: smooth; 是一个 CSS 属性，它用于在页面上平滑滚动到指定的位置，而不是突然地跳到那里。在设置了这个属性之后，当你使用内部链接或 JavaScript 等方法来滚动页面时，它会以平滑的动画效果将页面...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值