使用scrollTop()滚动时菜单闪烁 - 腾讯云开发者社区

文章/答案/技术大牛

发布

左侧导航click，右侧内容scroll——一个模拟外卖点单的简易页面

功能很明确，就是点击左侧菜单，右侧内容对应滚动指定；右侧内容滚动，左侧菜单对应高亮。 ? 点单的简易页面，emmmm..简洁得特别简陋一、问题描述这个demo有两处问题： 1....点击切换左侧菜单时，由于右侧内容滚动也触发了scroll事件，导致互相影响； ? 造成的菜单栏闪烁问题 2....由于滚动高度的限制，点击左侧6/7/8菜单时，右侧对应的内容不会置顶（当然，这个特征在目前各大外卖平台的产品设计就是不让置顶，但此处设计就是想点谁谁up）。 ?...滚动高度限制二、问题分析与解决 1.事件冲突问题这个问题我们可以考虑，在左侧菜单点击触发动画前，禁用右侧滚动事件，等动画结束后再启动右侧滚动事件。具体实现，可以通过一个标志来设定。...$(this).siblings('li').removeClass('on'); $(".menu-right").animate({scrollTop:$(this)

2.5K1 0

Js如何实现当网页超过一屏时导航菜单始终置顶-吸顶盒效果

前言我们平时在逛一些电商网站时,无论是首页还是详情页,通常会有一个导航菜单石红跟随着页面,无论是页面滚动到中间还是底部这是为了方便用户查看商品的各类信息或提交订单购物也就是吸顶盒效果,那这个效果是怎么实现的...= 0; // 初始化为顶部 // 监听页面滚动事件 window.onscroll = function() { // 获取当前的滚动距离 scrollTop...= document.body.scrollTop || document.documentElement.scrollTop; // 当超过150像素时,把顶部的导航菜单设置固定...css的positon样式,其次,在来控制网页是不是需要把导航菜单置顶,因为当网页内容的浏览没有滑出导航菜单的可见范围时,是没有必要把导航菜单置顶的,因此,在代码中就需要监听网页的滚动跳滑动事件当超过一定的范围以后...,才有必要为导航菜单设置固定的position样式其实也有另外一种解决办法,就是导航栏始终是固定在顶部,当拉动滚动条时到一定的范围,就改变背景色,也是一种解决办法

3.9K5 0

您找到你想要的搜索结果了吗？

是的

没有找到

优化长列表性能：虚拟滚动在React中的实践与思考

问题分析传统渲染方式的问题在于：一次性创建大量DOM节点，占用大量内存每个节点都需要样式计算和布局渲染滚动时频繁重绘，导致界面卡顿解决方案：虚拟滚动虚拟滚动通过只渲染可视区域内的内容来解决这个问题。...其核心原理是：计算容器可视区域的高度根据滚动位置确定需要渲染的数据范围只渲染可见项，隐藏不可见项使用空白填充区域保持正确滚动条高度实现步骤1....优化滚动性能为了避免滚动时的频繁重渲染，我们需要优化滚动事件处理：// 使用requestAnimationFrame优化滚动const useOptimizedScroll = (callback)...滚动闪烁问题快速滚动时可能出现空白区域，通过预渲染额外项目解决：// 增加缓冲区项目const buffer = 3; // 上下各多渲染3个项目const startIdx = Math.max(0,...，但需要注意：适用场景：最适合相同或相似高度的项目，动态高度会增加复杂性权衡考虑：虚拟滚动增加了代码复杂度，应在真正需要时使用渐进增强：可以先实现固定高度版本，再扩展支持动态高度在CodeBuddy项目中

4361 0

微信小程序-自定义菜单导航（实现楼梯效果）

设计初衷在开发页面时，往往需要实现，点击页面的导航菜单页面滚动到相应位置，滚动页面实现菜单选项的高亮。在html开发中，我们可以用到a标签锚点实现，jq的动画相结合实现类似效果。...效果展示当菜单导航滚动到页面顶部时，菜单吸顶当点击菜单按钮时，切换到对应区域（过渡到该区域，有动画效果）当内容区滚动到某类区域时，对应区域的菜单按钮高亮设计思路 1、吸顶效果的实现获取菜单导航距离页面顶部距离...在自定义组件或包含自定义组件的页面中，应使用 this.createSelectorQuery() 来代替。...2) 页面滚动监听 data中初始化--tabFixed=false（表示是否固定定位）滚动条滚动距离超过了菜单初始距离时，tabFixed=true开启定位 // 监听页面滚动 onPageScroll...// 监听页面滚动 onPageScroll: function(e) { let hTop = parseInt(e.scrollTop) // 自动切换菜单 let

2.1K2 0

使用 fartscroll.js 让你的网页在滚动时放屁

放屁绝对不是一个很高雅的行为，但是如果你比较喜欢恶搞，或者在愚人节，或者是一些比较特殊的网页设计中，可以通过 fartscroll.js 这个插件让你的网页在滚动的过程中放屁。...直接打开 fatscroll.js 的官方页面（http://theonion.github.io/fartscroll.js/），滚动一下，你就可以听到了放屁声音了，你滚动的距离和速度不同，放屁的声音也不同...使用方法也很简单，先下载插件包，解压出来之后，在网页中引入 fartscroll.min.js 这个文件，然后配置下面的参数等，启用这个插件： // 在文档中滚动 400 像素就放屁 $(document...).fartscroll(); // 文档中每滚动 800 像素就放屁 $(document).fartscroll(800); // 网页中没滚动 100 像素就放屁 $("body").fartscroll

1.6K2 0

JavaScript 自定义html元素鼠标右键菜单

自定义html元素鼠标右键菜单实现思路在触发contextmenu事件时，取消默认行为(也就是阻止浏览器显示自带的菜单),获取右键事件对象，来确定鼠标的点击位置，作为显示菜单的left和top值编码实现...IE8-不支持 // 显示自定义的菜单调整位置 let scrollTop = document.documentElement.scrollTop...|| document.body.scrollTop;// 获取垂直滚动条位置 let scrollLeft = document.documentElement.scrollLeft...|| document.body.scrollLeft;// 获取水平滚动条位置 menu.style.display = 'block'; menu.style.left.../ 鼠标点击其他位置时隐藏菜单 document.onclick = function(){ menu.style.display = 'none'; } } </script

2.9K3 0

bootstrap源码分析之scrollspy（滚动侦听）

源码文件： Scrollspy.js 实现功能 1、当滚动区域内设置的hashkey距离顶点到有效位置时，就关联设置其导航上的指定项 2、导航必须是 .nav > li > a 结构，并且a上href...$scrollElement.scrollTop() //获取基础高度，如果滚动区域内有不参与滚动计算的内容 } 4.2、根据导航上的hashkey来遍历获取滚动区域内的hashkey对应的...，用于计算当前需要高亮那个导航菜单 5.1、获取滚动容器已滚动距离： var scrollTop = this....$scrollElement.scrollTop() + this.options.offset 5.2、滚动容器可以滚动的最大高度 //最大可以滚动高度=滚动设置距离（offset）+ 滚动容器内容高度...& this.activate(targets[i]) //设置i为当前活动项 } 6、active：设置指定的导航菜单高亮 7、clear：清除所有高亮菜单

1.3K10 0

分享一些React虚拟列表的实现方法

containerRef.current) return; // 滚动距离 / 项目高度 = 起始索引 const scrollTop = containerRef.current.scrollTop...核心原理：外层容器设置固定高度并开启滚动用一个占位元素撑开列表总高度，保证滚动条正常工作通过滚动位置计算需要显示的项目范围（startIndex）只渲染可视区域内的项目，并通过 top 偏移到正确位置增加缓冲区...（额外渲染几个项目）减少滚动时的闪烁2....核心改进：用 heights 缓存每个项目的实际高度用 offsets 数组存储累计高度，快速计算任意位置的偏移量滚动时通过二分法（简化版）查找起始索引项目渲染后自动测量高度并更新缓存3....使用成熟的第三方库对于复杂场景，推荐使用经过优化的成熟库：react-window轻量级虚拟列表库，专注于性能和简单API。

4861 0

CSS固定定位与粘性定位4大企业级案例

常见的应用有：楼梯式导航、浏览器右侧菜单、底部通栏、全屏黑色半透明遮罩弹出层、弹出注册和登录框、左上固定右自适应后台管理系统布局粘性定位当滚动的高度>元素与浏览器的高度时，会以fixed固定定位显示...当滚动高度时，会以relative相对定位显示。...常见的应用有：吸顶盒导航,滚动吸附效果 1、楼梯式导航、浏览器右侧菜单、底部通栏（固定定位应用）这三个案例用都是用固定定位来控制其与浏览器位置。...//获取滚动条滚动的高度 scrollTop=document.documentElement.scrollTop || document.body.scrollTop;...使用 Git 在线项目部署；

2.1K3 0

移动端常见问题解决方案

完成透明 -webkit-tap-highlight-color:transparent; 取消ios里Button、Input上的默认样式 -webkit-appearance:none; 禁用长按页面时的弹出菜单...} })() 样式初始化css： normalize.css – 官网下载 normalize.css – github 三、meta标签设置适应移动端不对网站进行缓存多核浏览器,优先使用最新版本的...遮罩层滚动问题在有遮罩层的情况下，遮罩层下方的内容依然可以透过遮罩层滚动，因此要取消这种操作 (function(){ var scrollTop = 0; // 显示弹出层...$('.open').click(()=>{ // 在弹出层显示之前，记录当前的滚动位置 scrollTop = getScrollTop(); $('.workflow-modal...} /*遮罩层出现之前记录当前滚动位置*/ function getScrollTop() { return document.body.scrollTop || document.documentElement.scrollTop

1.8K1 0

JavaScript代码获取浏览器的可视高、文档滚动高和滚动距离

如果测试时，发现页面有滚动条，但是获取的滚动高度和可视高度一样，要注意看滚动条是不是 iframe 内嵌框架里的，上面可以进行切换，默认的 top 是默认最外层的框架。...获取滚动距离 var scrollTop = 0; if (document.documentElement && document.documentElement.scrollTop) { /...= document.body.scrollTop; } 说明：这段代码用于获取文档的滚动距离。...它首先检查 document.documentElement.scrollTop 是否存在，如果存在则将其作为滚动距离，否则检查 document.body.scrollTop 的值并将其作为滚动距离。...var clientHeight = document.body.clientHeight; window.innerHeight 浏览器窗口的视口高度，不包括浏览器的工具栏、菜单栏等。

1.1K0 0

前端虚拟列表的实现原理

一个虚拟列表是指当我们有成千上万条数据需要进行展示但是用户的“视窗”（一次性可见内容）又不大时我们可以通过巧妙的方法只渲染用户最大可见条数+“BufferSize”个元素并在用户进行滚动时动态更新每个元素中的内容从而达到一个和长...当用户当前的滚动offset未触发下标更新时，则因为本身phantom的长度关系让虚拟列表拥有和普通列表一样的滚动能力。...当触发重绘时因为我们计算的是startIndex 所以用户感知不到页面的重绘（因为当前滚动的下一帧和我们重绘完的内容是一致的）。...优化：对于上边我们实现的虚拟列表，大家不难发现一但进行了快速滑动就会出现列表闪烁的现象/来不及渲染、空白的现象。还记得我们一开始说的 **渲染用户最大可见条数+“BufferSize” 么？...因为每次渲染content时都会进行重排，但是如果使用transform时就相当于进行了( 重排 + transform) > 重排）回到列表元素高度自适应这个问题上来，现在我们有了一个可以在内部进行正常

2.1K4 0

锚点导航

为了方便直接用vue语法，首先要给每一个块一个唯一的ref，然后初始化的时候记录每一个块距离顶部的距离和每一个块的高度，并监听滚动： this....; this.itemOffsetTop.forEach((val, index) => { if(scrollTop > val.num && scrollTop - val.num >...，之前就是一个变量判断是否大于0，结果滚动条卡住了。...滚动加点动画效果直接用requestAnimationFrame ，一般都兼容，如果不兼容就用定时器，定时器会比较不顺滑。...监听滚动计算滚动的距离是否大于记录的距离，且超过一半就算下一个，菜单上面定位到下一个。

3.4K1 0

原生JS实现目录滚动特效

span>2013-11-06 6.导航条菜单的制作...span>2013-11-15 8.下拉菜单制作...area.scrollTop = 0; //复制列表1的内容给列表2 con2.innerHTML = con1.innerHTML;...//向上滚动函数 function scrollUp() { //当滚动列表向滚动的高度大于等于列表自身的高度时 if (area.scrollTop...>= con1.scrollHeight) { //将列表滚动高度归零，重新开始滚 area.scrollTop = 0;

37.1K2 0

实现图文消息的正确加载

// 新消息渲染完成，修改滚动条位置 messagesContainer.value.scrollTop = scrollHeight; } });...，导致了滚动条位置计算失误，一开始我选择沿用触底的时的方案，等img加载完成后获取滚动容器的高度，然后用当前消息容器高度 - 上一次保存的消息容器高度，这样就能计算出上一次浏览消息时的滚动条位置。...if (isBottomOut.value || data.isSendMessages.value) { // 新消息渲染完成，修改滚动条位置 messagesContainer.value.scrollTop...接下来，我们来看下优化后的效果，如下所示： [ gif加载失败,感兴趣的开发者可移步原文进行查看 ] 优化后，视觉效果相比未优化时要好上很多，虽然还是有点瑕疵，会闪烁一下，目前想不到其他解决方案了，只能先这样了...滚动条触底滚动条触底时，由于是需要等图片加载完成后修改滚动条的位置，图片未加载完成时，界面会先闪一下错误位置的消息，然后才是正确的消息。

1.7K3 0

蒙层禁止页面滚动的方案

当弹出蒙层时禁止蒙层下的页面滚动，也可以称为滚动穿透的问题，文中介绍了一些常用的解决方案。...，所以在设置这个样式的时候滚动条会消失，而移除样式的时候滚动条又会出现，所以在视觉上是会有一定的闪烁现象的，当然也可以定制滚动条的样式，但滚动条样式就是另一个兼容性的问题了，还有同样是因为裁剪。...，用于计算 let scrollTop = scrollerContainer.scrollTop; // 当前滚动的距离 let scrollHeight...，可以将其固定在视图中即position: fixed，这样它就无法滚动了，当蒙层关闭时再释放，当然还有一些细节要考虑，将页面固定视图后内容会回头最顶端，这里我们需要记录一下用来同步top值，这样就可以得到一个兼容移动端与...PC端的较为完善的方案了，当然对于浏览器的api兼容性是使用document.documentElement.scrollTop控制还是window.pageYOffset + window.scrollTo

7K2 1

jquery 置顶菜单

初始状态如上图，当拖动右侧的滚动条，菜单置顶的时候需要固定位置，如下： ? 注意：当Banner图片完全上移出了浏览器可视区域，此时菜单固定定位在文档的最上方。首先编写基本HTML以及CSS ?...此时有一个问题，就是滚动条往上拖的时候，无法恢复看到banner，一直被menu覆盖着。...编写menu当滚动条往上拖动的时候，恢复原来的定位，可以展示出banner ? 当设置postion:static的时候，定位的方式就会恢复文档流中的布局。其中top和left就会失效。...基本上执行菜单的问题就差不多是这样了。完整代码如下： scrollTop()); if( $(document).scrollTop() > 100 ){

5.3K2 0

微信小程序----导航栏滑动定位（实现CSS3的position:sticky效果）

实现的原理通过对scroll的监听获取滚动条的scrollTop值; 在导航的class判断scrollTop; 切换position:fixed与position:relative。...view> 活动菜单...: null }, //滚动条监听 scroll: function (e) { this.setData({ scrollTop: e.detail.scrollTop })...通过scroll事件获取scrollTop:this.setData({ scrollTop: e.detail.scrollTop }) 导航栏class的切换： scrollTop > 360 ?...此效果只是提供一个思路，不建议使用在项目中，体验太差，有待优化。如果有更好思路的大神，敬请指教。

2.2K2 0

JavaScript 学习总结

('div1').style.display 5，处理事件事件(event)：用户在访问页面时执行的操作。...例如：当鼠标移入时，display属性取值block；鼠标移出时dispay属性取值为none。...; oDiv.style.left=oEvent.clientX+scrollLeft+‘px’ ; //横向滚动处理 oDiv.style.top=oEvent.clientY+ scrollTop...右键打开快捷菜单（oncontextmenu事件（上下文菜单）：右键菜单）文本框输入表单提交阻止默认行为的一般的写法：return false 弹出自定义右键菜单： document.oncontextmenu...+‘px; return false; //阻止系统右键菜单 }; 弹出自定义右键菜单： document. (){ var oUl=document.getElementById('ul1')

1.6K4 0

巧妙实现右键菜单功能，提升用户操作体验

} = event; // 获取点击位置 const { scrollLeft, scrollTop } = document.documentElement; // 设置菜单的显示位置...this.contextMenuPos = { x: clientX + scrollLeft, y: clientY + scrollTop, }; this.showContextMenu...滚动校正：结合页面滚动偏移量 (scrollLeft 和 scrollTop)，确保菜单位置准确无误。...菜单显隐控制：通过 showContextMenu 标记菜单的状态，并在点击其他区域时触发 closeContextMenu 方法关闭菜单。...contextMenuPos.x + 'px' }"> 删除图片关键点：动态位置绑定：使用

3511 0

点击加载更多

左侧导航click，右侧内容scroll——一个模拟外卖点单的简易页面

Js如何实现当网页超过一屏时导航菜单始终置顶-吸顶盒效果

优化长列表性能：虚拟滚动在React中的实践与思考

微信小程序-自定义菜单导航（实现楼梯效果）

使用 fartscroll.js 让你的网页在滚动时放屁

JavaScript 自定义html元素鼠标右键菜单

bootstrap源码分析之scrollspy（滚动侦听）

分享一些React虚拟列表的实现方法

CSS固定定位与粘性定位4大企业级案例

移动端常见问题解决方案

JavaScript代码获取浏览器的可视高、文档滚动高和滚动距离

前端虚拟列表的实现原理

锚点导航

原生JS实现目录滚动特效

实现图文消息的正确加载

蒙层禁止页面滚动的方案

jquery 置顶菜单

微信小程序----导航栏滑动定位（实现CSS3的position:sticky效果）

JavaScript 学习总结

巧妙实现右键菜单功能，提升用户操作体验

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐