开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

移动设备上的视窗高度(100vh)会导致不需要的滚动

移动设备上的视窗高度(100vh)会导致不需要的滚动是因为移动设备上的视窗高度指的是当前可见区域的高度。当使用100vh作为元素的高度时，如果页面内容超过了视窗高度，就会出现滚动条。

这可能会导致不需要的滚动，特别是当页面的头部或底部有固定的导航栏或工具栏时。由于移动设备的地址栏和导航栏会占用一部分屏幕空间，导致视窗的高度变小，如果使用100vh作为元素高度，可能会超出屏幕可见区域，从而出现不必要的滚动。

为避免这种情况，可以考虑使用CSS属性overflow: hidden来禁止滚动，或者使用JavaScript动态计算元素的高度，以适应不同设备的视口高度。

腾讯云提供了丰富的产品和服务，包括云服务器、云存储、云数据库等，可以帮助开发者构建和部署各种应用。具体推荐的产品和介绍链接如下：

云服务器（CVM）：腾讯云的云服务器产品，提供灵活可扩展的虚拟服务器，满足不同规模应用的需求。了解更多：https://cloud.tencent.com/product/cvm
云存储（COS）：腾讯云的云存储产品，提供安全可靠的对象存储服务，适用于图片、音视频等多媒体文件的存储和管理。了解更多：https://cloud.tencent.com/product/cos
云数据库（CDB）：腾讯云的云数据库产品，提供高性能、可扩展的关系型数据库服务，支持MySQL、SQL Server等多种数据库引擎。了解更多：https://cloud.tencent.com/product/cdb

以上是腾讯云在云计算领域的部分产品和服务，可以帮助开发者解决在移动设备上使用视窗高度导致不需要的滚动的问题。

相关搜索:为什么iOS 10上的最小高度100vh会导致大窗口？移动设备上不需要的可滚动水平空间移动设备上的垂直滚动移动设备上不需要的扩展计算移动设备上的屏幕高度移动设备上的Canvas全屏导致断电移动设备上的粘性滚动问题使用移动设备拖动在画布上渲染的图像会导致图像消失背景大小导致移动设备上的背景消失移动设备上的图像高度是正常高度的三倍增加网页的原始高度会导致向后导航改变滚动位置页面滚动时移动设备上的Fabric (Canvas)Fancybox在移动设备上的滚动问题如何停止移动设备上的全日历滚动？移动设备上具有分页控件的vaadin网格高度在NavigationBar上滚动时，tableView上的navigationItem会移动防止在移动设备的触摸输入上滚动网页如果页面上的其他内容导致滚动，则高度为100vh的侧边栏不会填充页面移动网站上不需要的右页边距，导致水平滚动在移动设备上放大时的Div滚动问题

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

CSS | 视差滚动 | 笔记

例如，较远的东西（即 z 轴上的负平移）会移动得更慢。相反，距离较近的东西（即 z 轴上的正平移）会移动得更快。另一个物理效应是规模。如果我们把一些东西移得更远，它就会显得更小。...视口/视窗 (屏幕可见部分(去除书签栏等, 真正用于渲染页面部分), 非整个浏览器窗口) height：100% 铺满父容器的高度 height：100vh 铺满屏幕(viewport)的高度 "100vh...vh 是 css 中的一个相对长度单位，是相对于视窗的高度， 100vh 就是指元素的高度等于当前浏览器的视窗高度，即浏览器内部的可视区域的高度大小。...视窗被均分为 100 单位的 vh , 即1vh永远等于当前视窗高度的百分之一。视窗被均分为 100 单位的 vh。...遗憾的是，仍然没有一种简单的方法可以让一个元素在不依赖javascript的情况下占据整个视口高度。 height: 100vh 是如此接近伟大，但考虑到它在移动设备上的局限性，最好避免它。

7342 1

弹指间，重温几个设置满屏的小技巧

不妨了解一下 vh定义法 vh:css3新单位，view height的简写，是指可视窗口的高度,1vh=视窗高度的1%; 既然讲到CSS单位了，麻烦各位再脑补下这个问题： CSS单位都有哪些？...vh单位定义为视窗高度的百分比，那岂不是esay？ body{ height:100vh; } 搞定，大功告成！...这里扩展了解下vh在移动端设备上的部分“特性” 我们依然设置body 100vh的情况下，分别打开微信内置浏览器、Safari浏览器、Google浏览器从效果图不难看出，在Safari浏览器、Google...浏览器中100vh这个方案都是不完美的，都出现了滚动条，并不能达到我们预期的可视区域的满屏高度。...作为一个cv高手，借助搜索引擎我们了解到，Safari把网址栏与工具栏算进了100vh中，是第一个通过选择根据屏幕的最大高度为vh定义固定值来更新其实现的移动浏览器之一，而后Google浏览器也效仿它。

1.2K2 0

响应式图像

x描述符表示图像的设备像素比。浏览器根据运行环境，利用这些信息来选择适当的图像。不理解srcset的浏览器会直接加载src属性中声明的图像。...处理高度的时候，vh单位更好。 1. 占满宽度的元素: % > vw 正如我所提到的，vw单位根据视窗的宽度决定它的大小。然而，浏览器是根据浏览器的窗口计算视窗大小的，包括了滚动条的空间。...如果页面延伸超过视口的高度——滚动条出现——视窗的宽度将会大于html元素的宽度。因此，如果你将一个元素设置为100vw,这个元素将会延伸到html和body元素范围之外。...然而，用vh的话，就像下面写的那么简单： .example { height: 100vh; } 　　不管.example元素如何嵌套，它还是能够相对于视窗尺寸设置大小。...滚动条的问题也不是一个问题，因为现在大多数页面通常不会有水平滚动条。 vh应用全屏背景图片 vh单位一个典型的用途是用来创建一个横跨整个屏幕高度和宽度的背景图片，不管设备的大小。

2.5K1 0

微信小程序布局单位的使用

上： 1rpx = 0.552px 1px = 1.81rpx 在不同设备上rpx与px的转换是不相同的，但是宽度的rpx却是固定的，所以可以使用rpx作为单位，来设置布局的宽高，不是所有的单位都适合...rpx，字体不适合rpx,会导致不同设备看不清。...视口单位中的“视口”，桌面端指的是浏览器的可视区域；移动端指的就是Viewport中的Layout Viewport。 vw：viewpoint width，视口宽度，1vw等于视窗宽度的1%。...vh：viewpoint height，视口高度，1vh等于视窗高度的1%。 vw和vh是css3中的新单位，是一种视窗单位，在小程序中也同样适用。...小程序中，窗口宽度固定为100vw，将窗口宽度平均分成100份，1份是1vw 小程序中，窗口高度固定为100vh ，将窗口高度平均分成100份，1份是1vh [图片.png] vmin：vw和vh中较小的那个

3.1K6 1

vue上拉加载更多组件

但是这些组件都有一个问题，就是下拉到最底部，刷新浏览器，浏览器会记住这个距离，从而触发上拉加载的方法。虽然这个小问题在正常情况下没什么影响，于是自己就研究研究，写了一个上拉加载更多的组件。...上拉加载原理简单来说就是判断内容是否到达底部。容器自身的高度加上距离顶部的距离就是现在整个页面的高度。整个页面的高度减去可视窗口的高度再减去滚动条移动的距离，当接近0的时候就是到达底部的时候。...data： windowHeight: '',contentOffSetHeight: '',downT: '' 因为可视窗口和距离顶部的距离是不会变的，所以初始化的时候就赋值，downT是监听滚动防抖用的...，防止记住滚动条位置，亲测，要是没有设置history.scrollRestoration，vue生命周期会先移动到顶部然后再移动到记住的位置。...其实设置了这个移动到顶部也不需要，这边为了稳定就加上了。还有就是要移除监听滚动，我试了，跟定时间计时器一样，没有在组件销毁的时候移除，会一直存在。

2.1K1 0

54个CSS重难点整理，12-24篇，进阶高薪必需要掌握的知识点

是浏览器滚动的过的距离； img.offsetTop 是元素顶部距离文档顶部的高度（包括滚动条的距离）；内容达到显示区域的：img.offsetTop < window.innerHeight +...vw：相对于视窗的宽度，视窗宽度是 100vw； vh：相对于视窗的高度，视窗高度是 100vh； vmin： vw 和 vh 中的较小值； vmax： vw 和 vh 中的较大值； vw 和百分比的区别是...translate 不会触发浏览器重排和重绘,只会触发复合, 利用GPU效率高绝对定位会导致重排, 进而触发重绘, 利用CPU效率低 21、清除浮动的3种方式在父元素最后面加上<div style='...元素<em>的</em>位置在屏幕<em>滚动</em>时不会改变，⽐如回到顶部<em>的</em>按钮都是用<em>的</em>fixed固定定位 sticky 粘性定位，基于用户<em>的</em><em>滚动</em>位置来定位。...在有<em>滚动</em>条<em>的</em>页面中，absolute <em>会</em>跟着父元素进行<em>移动</em>，fixed 固定在页面的具体位置。

1.3K1 0

CSS&HTML面经专题——（四）移动端响应式布局

视觉视口不会影响布局视口的宽度和高度。固定大小——跟屏幕大小相同，在上面。 layout viewport（布局视口）：布局视口定义了pc网页在移动端的默认布局行为。...也就是说，在不设置网页viewport的情况下，pc端的网页默认会以布局视口为基准，在移动端进行展示。...px to rem 快捷键：ALT+Z （3）vh/vw vw：相对于视窗的宽度，视窗宽度是100vw vh：相对于视窗的高度，视窗高度是100vh 如果在iphone 6 下想 =100px ,...自适应布局也从PC延伸到手机，成为网页设计时候的需求. （2）概念就是宽度自适用布局，在不同大小的设备上，随着屏幕宽度缩放，网页以等比例的形式缩放宽度(包括内容))，不管屏幕宽度为多少，网页主体排版布局总是一样的...响应式布局（1）出现的背景自适应虽然成为网页设计的必要需求，但还是暴露出一个问题，如果屏幕太小，即使网页内容能够根据屏幕大小进行适配，但是在小屏幕上查看，会感觉内容过于拥挤，降低了用户体验。

2.3K2 0

不要用100vh做移动响应

一般来说，我们使用 height:100vh 进行全屏布局，这是一种很方便的响应式方法。....content { height: 100vh; } 但当在实际设备上测试我们的设计时，我们遇到了几个问题。大部分移动端的Chrome和Firefox浏览器在顶部都有一个UI（地址栏等）。...不同的浏览器有不同大小的视口移动设备计算浏览器视口为（顶栏+文档+底栏）=100vh 整个文档使用 100vh 填充到页面中问题谷歌已检测到滚动条问题。糟糕的用户滚动和难以浏览的内容。...解决方案通过JS检测应用程序的高度 const documentHeight = () => { const doc = document.documentElement doc.style.setProperty...; /* fallback for Js load */ height: var(--doc-height); } 最后结果现在没有任何额外的垂直滚动条出现，Safari也没有问题，这样的用户体验得到很大的提升

8663 0

vw, vh视窗宽高单位的使用

一、移动端经常用到 ? 不过“我看见你”和“我触碰你”是不一样的。正好，机缘巧合，最近又与这两个单位想见。大致琢磨了下，貌似vh这个单位可以实现我以前曾希望实现的的整体高度自适应布局。...因此，本文后面要展示的N个demo，就没有必要再低版本的IE浏览器上查看了~~ 三、明确含义看到上图黄色背景标示的文字（“视窗”用“视区”一词代替更恰当）： vw 相对于视窗的宽度：视窗宽度是100vw...然后各个浏览器测试发现，效果是一模一样的（不支持position: fixed的IE6就当它不存在吧），固定在视区底部，不随滚动条滚动的空白工具栏：说实话，原本第一眼看到单位vw, vh的时候，觉得这个单位...%可以实现之~~ vw, vh这两个视区相关动态单位似乎应用前景一下子黯淡了很多，潜力似乎也就那样——想来想去，得出一个结论：vw, vh视区大小相关单位只适用于非定位元素的高度相关属性上！ ...支持)，表示视区宽度或高度较小的那个。

2.5K1 0

十万条数据，后端不分页咋办！（如何优化长列表渲染）

；在一个移动端的页面上呈现成千上万个dom，除了请求时的挑战，渲染时对于用户的设备性能也是一个极大的考验。...如果网页的dom过多会导致低端设备变得卡顿甚至无法使用。...图片如何实现一个虚拟列表，实际上就是在首屏加载的时候，只加载可视区域内需要的元素，当页面滚动时，再动态计算需要被渲染的元素，删除掉消失在视窗中的元素，保持总数一致。...// 假定需要渲染的数据为 listData[] , 每个元素的高度为 itemHight，占位Dom的滚动距离为scrollTop； const wrapperHight = X； //视窗高度 const...startOffset = scrollTop； //列表偏移量 const visibleData = listData.slice(startIndex, endIndex); //可视区域数据我们可以利用视窗的高度计算出此时视窗中的开始元素与结束元素

3K6 4

height:100vh的应用

家好，又见面了，我是你们的朋友全栈君。今天改移动端页面样式的时候因为height:100vh，导致我想超出部分滚动页面的效果没有做出来。就查查这玩意是啥意思。...别人解释的height:100vh vh就是当前屏幕可见高度的1%，也就是说 height:100vh == height:100%; 但是当元素没有内容时候，设置height:100%，该元素不会被撑开...，此时高度为0，但是设置height:100vh，该元素会被撑开屏幕高度一致。...当前我的页面内容过多，需要滚动条显示的时候，滚动到最下，还是无法显示我页面的全部内容，因为我顶部有其他标签。...所以说根据情况碰一碰啥样的情况可以用…滚去打代码了发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/140669.html原文链接：https://javaforall.cn

1.1K2 0

CSS入门13-单位详解

3.1.2-2 3.1.3 ex ex是指所用字体中小写x的高度，不同字体x的高度可能不同。实际上，很多浏览器取em值一半作为ex值。 ex在实际中常用于微调。...3.2 相对视窗宽高的长度单位视窗相关的长度值相对于初始包含块的大小。当初始包含块的宽高变化时，它们都会相应地缩放。然而，当根元素的overflow值为auto时，任何滚动条会假定不存在。...关于视窗相关的单位有vh、vw、vmin、vmax4个单位。兼容性上，IE8-不支持，IOS7.1-不支持，android4.3-不支持。...3.2.1 vh 布局视窗高度的1/100 设置height:100vh;可以达到与屏幕等高的效果。...3.2.4 vmax 布局视窗高度和宽度之间的最大值的 1/100 设置height: 100vmax;width: 100vmax;可以达到类似于cover的效果。

6312 0

CSS Viewport 单位，很多人还不知道使用它来快速布局！

它们的好处在于为我们提供了一种不需要使用J avaScript 就能以动态的方式调整大小的方法。而且，如果它失效，也有很多备用方案。...但是，如果没有适当的测试就直接使用它可能会踩到坑。让我们看下面的视频： ? 体大小变得非常小，这不利于可访问性和用户体验。据我所知，移动设备上的最小字体大小不应该不于14px。...; align-items: center; } 通过添加 height: 100vh，我们可以确保section 高度将采取100%的视口。...响应式元素假设我们有一个作品集来展示我们的响应式设计工作，并且我们有三种设备(移动设备、平板电脑和笔记本电脑)。每个设备包含一个图像。目标使用 CSS 来响应适配这些页面。 ?....header { border-top: calc(2px + 0.138vw) solid $color-main; } 移动端滚动问题移动设备中存在一个常见问题，即使使用100vh，也会滚动

3.3K3 0

2023年即将推出的CSS特性对你影响大不大？

使用 :has() 选择器可以访问父元素、子元素，甚至兄弟元素例如：带有“⭐️”元素的项目会应用灰色背景，而带有选中复选框的项目会应用蓝色背景。...，尤其是在移动设备上。...作为开发人员，希望 100vh （视口高度的 100%）表示“与视口一样高”，但该 vh 单元不考虑移动设备上缩回导航栏之类的事情，因此有时它最终会太长并导致滚动。...为了解决这个问题，现在在 Web 平台上提供了新的单位值：小视口高度和宽度（或 svh 和 svw），表示最小的活动视口大小。较大的视口高度和宽度（lvh 和 lvw），表示最大大小。...每个点不是围绕其自身的中心旋转然后向外移动，而是在 X 和 Y 轴上平移。X 轴和 Y 轴上的距离分别通过考虑 --angle 的 cos() 和 sin() 来确定。

2033 0

前端懒加载和预加载

属性存放真正需要显示的图片的路径，当页面滚动直到图片出现在可视区域时，将data-src中的图片地址值赋值给src属性值。...大于页面高度，或者rect.right为负数，或者rect.left大于页面宽度，则认为元素已不在页面的可视区域。...const rect = element.getBoundingClientRect();rect.top：元素上边到视窗上边的距离;rect.bottom：元素下边到视窗上边的距离;rect.left...：元素左边到视窗左边的距离;rect.right：元素右边到视窗左边的距离;window.innerHeight：视窗高度window.innerWidth：视窗宽度图片实现效果利用开发者工具我们可以看到如下截图...当使用到已经预加载好的图片时，会直接使用缓存好的图片资源，而不需要向服务器发送请求。<!

2.1K2 0

图片懒加载实现方式

图片作为前端开发中不可或缺的元素，其加载速度对用户体验有着重要影响。然而，大量的图片加载不仅会消耗用户流量，还会导致页面加载缓慢，影响用户体验。...图片懒加载的原理图片懒加载的实现原理主要基于以下几个关键点：滚动事件监听：图片懒加载的核心是通过监听浏览器的滚动事件（scroll事件）。当用户滚动页面时，会触发这个事件。...，看起来并不怎么丝滑，加载时机也不是很准确，以下是优化分析 1.当前代码中，图片加载是按顺序进行的，这可能导致滚动到页面的底部时，页面加载速度变慢。...2.事件当目标元素与视窗交叉的状态发生变化时，会触发回调函数。以下是可能发生的事件：进入视窗（Enter the viewport）：目标元素首次进入视窗。...注意图片要给个默认高度来撑开父级元素，否则初始化的时候图都堆积在一起，所以Intersection Observer会判定在可视窗口内的img 造成过度加载。

1141 0

移动端页面在IOS里滑动不顺畅解决办法

开发移动端的同学可能都知道，当在你用overflow-y:scorll属性的时候，内容超出容器溢出滚动的效果很迟顿，特别是在IOS系统里，通常情况下，我们为了追求好的用户体验，会使用屏幕滚动插件better-scroll...简单说明一下： -webkit-overflow-scrolling ：控制元素在移动设备上是否使用滚动回弹效果。 auto：使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。...touch：使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果，继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。...需要注意的事项：通过动态添加内容撑开容器，结果根本不能滑动。在safari上，点击其他区域，再在滚动区域滑动，滚动条无法滚动。　...的元素添加一个子元素，设置子元素的高度为height:101%，或者为了精确一些写成height:calc(100vh + 1px),注意这个加号前后都要有空格．

2.2K1 0

Chrome 108 ：发布新的 CSS 布局单位！

一般我们提到的视口有三种：布局视口、视觉视口、理想视口，在我之前写的下面这篇文章中详细介绍了视口相关的概念和原理看兴趣可以看：关于移动端适配，你必须要知道的在响应式布局中，我们经常会用到两个视口相关的单位...： vw(Viewport's width)：1vw 等于视觉视口的 1% vh(Viewport's height) : 1vh 为视觉视口高度的 1% 另外还有两个相关的衍生单位： vmin :...vw 和 vh 中的较小值 vmax : 选取 vw 和 vh 中的较大值如果我们将一个元素的宽度设置为 100vw 高度设置为 100vh，它将完全覆盖视觉视口：这些单位有很好的浏览器兼容性，...但是，在移动设备上的表现就差强人意了，移动设备的视口大小会受动态工具栏（例如地址栏和标签栏）存在与否的影响。视口大小可能会更改，但 vw 和 vh 的大小不会。...因此，尺寸过大的 100vh 元素可能会从视口中溢出。当网页向下滚动时，这些动态工具栏可能又会自动缩回。在这种状态下，尺寸为 100vh 的元素又可以覆盖整个视口。

1.6K2 0

给萌新HTML5 入门指南

广义上的HTML5是HTML最新的修订版本，由万维网联盟（W3C）于2014年10月完成标准制定。...一些语义化标签如section、nav在使用时和传统div并无大的区别，但这种标签更有利于搜索引擎的索引整理，利于智能手机、Pad等小屏设备适配，以及方便残障人士使用。...Web Workers，JavaScript单线程，复制js需算会导致页面出现假死。如果js操作不需要访问页面window，那么可以放在web worker中并行处理。...下面我们通过一个例子来展示Flex布局的易用性，下图是一个典型的单页应用样式，结构上分为header，aside，footer和main四部分。...body设置高度 100vh，这里使用了CSS3 的新单位vh，即 view height 视窗高度，100vh相当于html, body 高度100%，同样还有vw代表视窗宽度 body设置flex

1.3K4 1

一个简洁、有趣的无限下拉方案

传统的各种方案不但复杂，而且性能成本很高，比如需要监听滚动事件，然后查询 DOM , 获取元素高度、位置，计算距离视窗高度等等。这就是 Intersection Observer 要解决的问题。...数组的长度会随着不断请求新的数据而不断变大，而渲染的始终是其中一定数量的元素，比如 20 个。...那么：最开始渲染的是数组中序号为 0 - 19 的元素，即此时对应的 firstIndex 为 0；当序号为 19 的元素（即上一步的 lastItem ）进入视窗时，我们就会往后渲染 10 个元素...获取滚动距离，然后：设置父元素的 translate 来实现整体内容的上移（下移）；再基于这个滚动距离进行相应计算，得知相应子元素已经被滚动到视窗外，并且判断是否应该将这些离开视窗的子元素移动到末尾...这就像是一个循环队列一样，随着滚动的进行，顶部元素先出视窗，但又将移动到末尾，从而实现无限下拉。

1.9K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭