在页面底部有困难，当我滚动时，底部有一个空白 - 腾讯云开发者社区

文章/答案/技术大牛

发布

见识了电信流氓插iframe+分析解决方案

这两天回了家从感觉浏览器行为有些怪异，有些熟悉的网页无故出现了额外的竖直滚动条，有时候是两个，有时候甚至到了3个！我是用的是chrome浏览器，像现在wp后台添加文章的页面就是有3个竖直滚动条的。...首先毫无疑问wp后台是使用的iframe的结构，我们来把滚动条拉到末端，发现页面底部无故多出大片空白。最里边的滚动条拉到底部是正常的wp的最底部，另外两个滚动条到底部之后呈现的空白块又是什么呢？...通过chrome右键的审查元素我们发现，我们的页面被嵌入了一个iframe之中，而正因为文章编辑这个页面本身有一层iframe(src:post-new.php)，这里被挂了一次iframe，加上wp后台边栏这一层又被加了一次...剩余的代码有一部分是为了对这种iframe劫持做出的修正，包括form和连接的target为空时的修正，剩下的看不懂了。...另外这个被插iframe造成的额外竖直滚动条的现象在页面刷新之后会消失，这个也符合绿色上网检测的要求。

1.9K2 0

关于虚拟列表，看这一篇就够了

传统做法对于长列表渲染，传统的方法是使用懒加载的方式，下拉到底部获取新的内容加载进来，其实就相当于是在垂直方向上的分页叠加功能，**但随着加载数据越来越多，浏览器的回流和重绘的开销将会越来越大** 2....虚拟列表其核心思想就是在处理用户滚动时，只改变列表在可视区域的渲染部分，然后使用padding或者translate来让渲染的列表偏移到可视区域中，给用户平滑滚动的感觉。...虚拟列表原理虚拟列表的核心步骤可以总结成五步：不把长列表数据一次性全部直接渲染在页面上截取长列表一部分数据用来填充可视区域长列表数据不可视部分使用空白占位填充（下图中的startOffset和endOffset...// 过滤页面其他滚动 if (e.target !...，目前想到的办法有两个是加一个过渡的loading，隐藏滚动条，让用户只能滚轮滚动不定高度当列表项的高度不固定的时候，我们就需要一个策略来得到需要渲染的列表项，就是先给没有渲染出来的列表项设置一个预估高度

5.4K3 2

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

是的

没有找到

记一次「无限滚动」列表优化

其实，在第二点缩小范围时，应该意识到，空白问题/拖动不流畅均是因为渲染性能低下导致的测试验证 1....利用 Intersection Observer 实现：在列表的底部（也可能是底部偏上的某个位置）插入一个observer-dom元素....通过Observer来观测其是否在可视区域中，如果在，那么就往下加载更多的内容：初始状态时，列表会多渲染几条数据（两屏数据），observer-dom元素一直被顶到底部....虚拟长列表优点：可以保证渲染在页面上的dom元素尽可能少缺点：如果没有特殊处理（比如rc或锁定滚动区域），快速滚动时，基本都会有闪动的情况（也就是本次的空白问题） 2....再通过加一个loading效果，帮助优化体验缺点：当用户把列表拉到底，整个列表都会被渲染到页面上在选择虚拟长列表or下拉懒加载之间的取舍时，可以参考：如果闪动问题可以接受（组件渲染没有太大性能问题

4K2 0

h5页面在不同iOS设备上的问题总结

在做文章评论的功能时，会遇到很多兼容性的问题，在不同机型上的表现也很不一致，总结了以下这些问题。 1. 日期问题对于yyyy-mm-dd hh:mm:ss 这种格式在ios系统不识别。...键盘收起，页面卡住，不回落 ios12上，发现键盘收起的时候，页面会卡主，留下底部一片空白，稍微动一下页面，就会恢复。...这种问题，在网上查了很多解决方案，大致是在blur事件中，让页面滚动一下 window.scrollTo(0, scroll); 但是有一个很严重的问题：如果页面上有按钮需要操作，例如，评论的输入框+...3. ios12在微信小程序的webview，键盘收回，页面底部会留白这个问题怀疑是页面的scroll设置了auto导致的。解决方案：滚动一下页面，请参考链接，代码有效。...键盘遮挡输入框输入框如果使用了fixed固定在底部，键盘顶起的时候，iphone上fixed会失效，导致页面滚动输入框会随着页面滚动，并且在部分机型上，输入框偶尔会被键盘遮挡，这种偶现的问题，很不友好

2.8K2 0

打造聊天框丝滑滚动体验：AI 聊天框的翻转之道

逐字渲染的挑战最近在开发AI聊天助手的时候，遇到了一个很有趣的滚动问题。我们需要开发一个类似微信聊天框的交互体验：每当聊天框中展示新消息时，需要将聊天框滚动到底部，展示最新消息。...如果在 web 什么也不做，聊天体验可能是这样的，需要用户手动滚动到最新消息：试想一下如何在 web 中实现微信的效果。每当聊天框中接收到新消息时，都需要调用滚动方法滚动到消息底部。...于是联想到了 Excel 表格，当我们在表格中第一行插入一行，这一行后边的内容会被很自然的挤下去。并不需要做什么滚动，这一行就会出现在最顶部的位置。...并且在消息输出时，也可以随意滚动查看历史记录。滚动条调整与滚动行为反转最核心的问题已经解决了，但总觉得哪里看起来怪怪的。...不需要对聊天框和消息体再进行旋转操作，也不需要反转滚动条的行为。以上两种方法都存在一个相同的问题，当一开始聊天消息还很少时，聊天消息也会紧贴着底部，顶部会留出一片空白。

3.5K2 1

移动端必备的H5问题及解决方案

原来在 iOS 5.0 以及之后的版本，滑动有定义有两个值 auto 和 touch，默认值为 auto。...解决方案监听事件禁止滑动移动端触摸事件有三个，分别定义为 touchstart ：手指放在一个DOM元素上。 touchmove ：手指拖曳一个DOM元素。...== scrollParent.scrollTop) { return true; } 主要目的就是，在使用 touchstart 合成 click 事件时，保证其不在滚动的父元素之下。...五、软键盘将页面顶起来、收起未回落问题表现 Android 手机中，点击 input 框时，键盘弹出，将页面顶起来，导致页面样式错乱。移开焦点时，键盘收起，键盘区域空白，未回落。...判断设备是否属于 iPhone X，给头部底部增加适配层 viewport-fit 有 3 个值分别为： auto：此值不影响初始布局视图端口，并且整个web页面都是可查看的。

5.8K4 2

两句话让 CodeBuddy 为我打造了一个未来感十足的图书管理 App 个人页面

接着我继续提要求，越写越长：整屏模糊背景，并在中间放一个圆形头像和实时进度环（Lottie 实现）以弧线排布展示阅读量，当数字更新时要有翻牌、跳动效果书单以玻璃拟态卡片横向滚动成就徽章区要加 3D...缩放和弹性动画页面底部悬浮一排圆形快捷按钮，半透明 + 轻触反馈自定义悬浮导航栏，图标往上浮起、文字渐显初次加载时，让所有模块从底部缓缓淡入，并伴随粒子飘落主色调用深紫渐变，点缀湖蓝、薰衣草紫和微弱金色...最让我印象深刻的是，它还会提醒： “如果某些图标文件不存在，先移除配置保证编译通过；低端机不支持 backdrop-filter，可写降级样式；Lottie 和粒子库在注释里备注 CDN 地址。”...真机跑起来后效果超出预期：顶部是柔和模糊背景 + 用户信息；中段弧形卡片展示阅读统计、书单横滑；徽章区可左右滑动并伴随弹性效果；底部悬浮导航栏在滚动时始终可见，图标和文字有层次感；页面各元素按节奏淡入...结语从一个空白页面到充满未来感的拟态 UI，这次体验让我看到了 AI 辅助开发的无限可能。

3250 0

兼容iphone x * 刘海的正确姿势

，因为如果页面底部有按钮的话，就会被胡子给挡住，以往我们兼容过 iphone x 的下巴，但现在回想起来不是正确的做法。...这样只是解决了底部胡子的问题，我们试着横屏看看： ? 这里有个很明显的问题：页面左边的文字被刘海遮挡。 ?...在 safari 往上段滑动一小段距离，可以看到当 safari 的底部操作栏出现后，页面依然会保留着距底部的 34px 空白。...3、还有另一个考虑是，当我们设置 viewport-fit:contain，也就是默认的时候时，设置 safe-area-inset-* 等 css 属性时不起作用的。...三、底部按钮的处理首先给底部按钮一个外层容器 .btn-container ，设置样式时其中有几点比较关键： 1、设置padding-bottom: env(safe-area-inset-bottom

1.5K3 0

每页500条数据的渲染优化

ui上并无法展示500条数据，所以一次性渲染500条也没有必要，用户也许只需要看前面20条；必要时加载，在我们大多数的数据请求以及交互请求中，都是必要时加载，懒加载。那么我们也是这样考虑的。...let pageData = [] //len 500 let uiData = [] //len 20 写一个loadUiData 以及loadPageData 的方法既然假定了用户是基于滚动加载得到更多数据的...每次滚动加载时调用loadUiData,使得uiData.concat(pageData[20,40]),然后记录页数和总数据数，当发现ui的数据已经把当前请求的数据都加载完时，请求新的页面数据（以及loadPageData...加载的时机刚才讲到分批加载，那么作为分批加载时，一般情况是加载1.5屏或者两屏的数据，当我们发现我们的最后一条数据距离视口还有0.5或者0.3屏时会自动加载，这种是属于隐性无感知的加载；还有一种是明显感知的...，是用户距离底部30-50px时，有底部加载的动画或者全屏加载的动画，然后看到新的数据渲染出。

9213 0

吃透移动端 H5 与 Hybrid｜实践踩坑12种问题汇总

iOS 上拉边界下拉出现白色空白表现手指按住屏幕下拉，屏幕顶部会多出一块白色区域。手指按住屏幕上拉，底部多出一块白色区域。...滚动妥协填充空白，装饰成其他功能在很多时候，我们可以不去解决这个问题，换一直思路。根据场景，我们可以将下拉作为一个功能性的操作。比如：下拉后刷新页面 ?...== scrollParent.scrollTop) { return true; } 主要目的就是，在使用 touchstart 合成 click 事件时，保证其不在滚动的父元素之下。...软键盘将页面顶起来、收起未回落问题表现 Android 手机中，点击 input 框时，键盘弹出，将页面顶起来，导致页面样式错乱。移开焦点时，键盘收起，键盘区域空白，未回落。...判断设备是否属于 iPhone X，给头部底部增加适配层 viewport-fit 有 3 个值分别为： auto：此值不影响初始布局视图端口，并且整个web页面都是可查看的。

2.7K2 0

2019-08-09 满屏切换vue项目中使用 vue-fullpage.js

// //滚动到最顶部后是否连续滚动到底部 // loopTop: true, // //滚动到最底部后是否连续滚动到顶部 // loopBottom: true...，当我们要设置一个固定在顶部的菜单、导航、元素等时使用 // paddingTop: "100px", // //设置每个section底部的padding，当我们要设置一个固定在底部的菜单...: ".nav", // //是否可以使用键盘方向键导航 // keyboardScrolling: false, // //在移动设置中页面敏感性，最大为100，越大越难滑动 //...// //滚动到最顶部后是否连续滚动到底部 // loopTop: true, // //滚动到最底部后是否连续滚动到顶部 // loopBottom: true...，当我们要设置一个固定在顶部的菜单、导航、元素等时使用 // paddingTop: "100px", // //设置每个section底部的padding，当我们要设置一个固定在底部的菜单

13.5K3 0

从 antDesign 来窥探移动端“滚动穿透”行为

简单直译过来是说默认情况下，当到达页面的顶部或底部（或其他滚动区域）时，移动浏览器倾向于提供“弹跳”效果甚至页面刷新。...您可能还注意到，当滚动内容页面顶部有一个包含滚动内容的对话框时，一旦到达对话框的滚动边界，底层页面就会开始滚动 - 这称为滚动链接。...比如上方图片中有两个元素，一个为红色边框存在滚动条的父元素，另一个则为蓝色边框黑色背景不存在滚动条的子元素。当我们拖动不可滚动的子元素时，实际会意外造成父元素会跟随滚动。...将可滚动元素拖动至顶部或者底部时，继续拖动触发最近可滚动祖先元素的滚动。还有另一种常见场景，我们在某个可滚动元素上进行拖动时，当该元素的滚动条已经到达顶部/底部。...想象一下，如果你的页面中每个 Modal 弹窗都使用了 useLockScroll 这个 hook ，那么当页面中开启两个弹窗，当关闭一个时另一个还存在时总不能移除了 BODY_LOCK_CLASS 吧

1.9K2 0

吃透移动端 H5 与 Hybrid｜实践踩坑12种问题汇总

最终我在 safari 文档里面寻找到了答案（文档链接在参考资料项）。原来在 iOS 5.0 以及之后的版本，滑动有定义有两个值 auto 和 touch，默认值为 auto。...滚动妥协填充空白，装饰成其他功能在很多时候，我们可以不去解决这个问题，换一直思路。根据场景，我们可以将下拉作为一个功能性的操作。...== scrollParent.scrollTop) { return true; } 主要目的就是，在使用 touchstart 合成 click 事件时，保证其不在滚动的父元素之下。...软键盘将页面顶起来、收起未回落问题表现 Android 手机中，点击 input 框时，键盘弹出，将页面顶起来，导致页面样式错乱。移开焦点时，键盘收起，键盘区域空白，未回落。...判断设备是否属于 iPhone X，给头部底部增加适配层 viewport-fit 有 3 个值分别为： auto：此值不影响初始布局视图端口，并且整个web页面都是可查看的。

1.8K3 0

兼容iPhone X* 刘海的正确姿势

，因为如果页面底部有按钮的话，就会被胡子给挡住，以往我们兼容过 iphone x 的下巴，但现在回想起来不是正确的做法。...2、创建一个 after 伪类通过设置 position:fixed 定位到页面底部，并设置成白色，这一处理主要是遮挡住页面背景色。...在 safari 往上段滑动一小段距离，可以看到当 safari 的底部操作栏出现后，页面依然会保留着距底部的 34px 空白。...3、还有另一个考虑是，当我们设置 viewport-fit:contain，也就是默认的时候时，设置 safe-area-inset-* 等 css 属性时不起作用的。...目前到这，在横屏场景下左侧的内容就不会被刘海遮挡住了：三、底部按钮的处理首先给底部按钮一个外层容器 .btn-container ，设置样式时其中有几点比较关键： 1、设置 padding-bottom

9891 0

【Hybrid】518- 12种移动端 H5 与 Hybrid问题汇总

1.9K2 2

网站设计：十条需避免的常见错误

在照片上方放置太多的文本会造成阅读困难。如果你在照片上放置文字，记住 -- 颜色对比是你最大的朋友。你需要与这部分工作建立良好的关系，因为它是每个网页设计过程的自然元素。...在处理字体时，你有一个完美的机会来应用该规则。如果你得意忘形并使用太多不同的字体，你的网站看起来就会很乱并且更难阅读。使用技巧：页面中使用 2-3 类型的字体。不要太多。...当我们在讨论照片和图像上放置文本时，它当然适用。然而，有时候，如果你过于努力追求极简主义，你的设计最终可能会让人感觉空洞。它不仅看起来不专业和未完成，而且会让访客感觉到困惑。...如果他们向下滑动页面，什么都没看到而是空白空间，他们可能会疑惑是否已经滑动到页面底部，而不会一直向下滚动。如果发现这种情况，你的大部分内容可能被忽略。并且，我打赌那是你不想要的。...可能的解决方案：总是确保，当你滚动页面的时候在视野范围内有东西。避免在章节之间有很大的空白确保你的站点是响应式的。它可能在你的手提电脑（可行），但是在其他更大或者更小的屏幕中可能就搞砸了。

5672 0

鸿蒙开发实战案例：NavDestination弹窗思路

介绍本案例介绍了使用NavDestination组件的Dialog模式实现与前一个页面的联动的评论弹窗。...效果预览图使用说明点击案例中的商品介绍页面底部商店信息栏中的评论图标，即可拉起评论区弹窗，同时商品介绍页面自适应缩小。...如果显示评论区时不想显示底部商店信息栏，可以设置弹窗高度直接覆盖，可以简化实现代码。...此处有一个注意点是同步评论区List组件的滑动手势和前面手动设置的自定义滑动手势。首先需要监听评论区的滑动位置，只有用户不在浏览状态（也就是List偏移不为0）时才可以触发自定义手势。...为了更好的列表滚动体验，减少列表滑动时出现白块，使用了List组件的cachedCount参数用于设置列表项缓存数，只在懒加载LazyForEach中生效。

4571 0

滚动穿透的6种解决方案【已自测】

加一个属性 -webkit-overflow-scrolling: touch;/* 解决在IOS上滚动惯性失效的问题 */ 但是这只是简单地解决了一个问题：实现了滑动弹窗其他地方（蒙层背景），底部body...真正的问题是当我们滑动弹窗可滚动区域，把可滚动区域的内容上滑到底部或下拉到顶部后，再触发弹窗可滚动区域准备滑动，此时的背景页面就会跟随滚动。真是恐怖。...因此还需要我们对弹层的可滚动区域的滑动事件做监听：第一种情况，若向上滑动时，到达底部；或者第二种情况，若向下滑动时，已到顶部。这两种情况任意一种发生时，就阻止滑动事件。...代码： 1、事先准备一个工具： 2、获取页面的滚动距离： 3、弹层出现/消失的主流程局限问题：这个方法我在真机上测试时发现一个问题，是IOS的：大家应该都知道IOS的页面顶部继续下拉或者底部继续上拉...最后总结：接着最后一个方案的问题，我返回去测试了所有方案在真机上打开弹窗时的上滑或下拉问题。

14.7K3 1

Material Design — 底部导航（Bottom Navigation）

规格每个部分的宽度：底部导航的宽度除以一级页面数量（最大值为168dp，最小为80dp）高度：56dp 图标：24×24dp ---- 用法底部导航提供了一个在一级页面之间的快速导航方式，主要用户移动端...应按下列要求制作每一个动作（目前并不适用，因为图标无法100%传递标签的内容）： ·当页面处于焦点时，显示页面的icon和标签； ·当只有三个动作时，始终显示icon和文本标签； ·如果有四个或五个动作...底部导航栏可以从一个主题中的n级页面移动到另一个主题的一级页面。当用户去往下级页面时要保持底部导航可用，可通过持续展示，或者通过滚动隐藏和显示。...滚动底部导航栏滚动时可以动态地出现和消失： ·向下滚动隐藏底部导航栏 ·向上滚动显示手势在内容区域上使用左右滑动手势不会在一级页面之间切换。...点击icon进行切换时也该避免横向切换在页面之间转换（如左右推进）。

5.4K9 1

12个关于移动 H5 开发的采坑问题汇总

最终我在 safari 文档里面寻找到了答案（文档链接在参考资料项）。原来在 iOS 5.0 以及之后的版本，滑动有定义有两个值 auto 和 touch，默认值为 auto。...滚动妥协填充空白，装饰成其他功能在很多时候，我们可以不去解决这个问题，换一直思路。根据场景，我们可以将下拉作为一个功能性的操作。...== scrollParent.scrollTop) { return true; } 复制代码主要目的就是，在使用 touchstart 合成 click 事件时，保证其不在滚动的父元素之下。...软键盘将页面顶起来、收起未回落问题表现 Android 手机中，点击 input 框时，键盘弹出，将页面顶起来，导致页面样式错乱。移开焦点时，键盘收起，键盘区域空白，未回落。...判断设备是否属于 iPhone X，给头部底部增加适配层 viewport-fit 有 3 个值分别为： auto：此值不影响初始布局视图端口，并且整个web页面都是可查看的。

2.3K4 2

点击加载更多

见识了电信流氓插iframe+分析解决方案

关于虚拟列表，看这一篇就够了

记一次「无限滚动」列表优化

h5页面在不同iOS设备上的问题总结

打造聊天框丝滑滚动体验：AI 聊天框的翻转之道

移动端必备的H5问题及解决方案

两句话让 CodeBuddy 为我打造了一个未来感十足的图书管理 App 个人页面

兼容iphone x * 刘海的正确姿势

每页500条数据的渲染优化

吃透移动端 H5 与 Hybrid｜实践踩坑12种问题汇总

2019-08-09 满屏切换vue项目中使用 vue-fullpage.js

从 antDesign 来窥探移动端“滚动穿透”行为

吃透移动端 H5 与 Hybrid｜实践踩坑12种问题汇总

兼容iPhone X* 刘海的正确姿势

【Hybrid】518- 12种移动端 H5 与 Hybrid问题汇总

网站设计：十条需避免的常见错误

鸿蒙开发实战案例：NavDestination弹窗思路

滚动穿透的6种解决方案【已自测】

Material Design — 底部导航（Bottom Navigation）

12个关于移动 H5 开发的采坑问题汇总

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐