首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

调整高度时safari手机滚动条丢失

调整高度时,Safari手机滚动条丢失是指在使用Safari浏览器的移动设备上,当页面高度发生变化时,滚动条消失的现象。

这个问题通常是由于Safari浏览器的特性导致的,它在某些情况下会隐藏滚动条以提供更流畅的用户体验。然而,当页面高度发生变化时,滚动条可能会意外地消失,给用户带来困惑。

为了解决这个问题,可以尝试以下方法:

  1. CSS样式调整:使用CSS样式来控制滚动条的显示。可以使用overflow-y: scroll;来强制显示垂直滚动条,或者使用-webkit-overflow-scrolling: touch;来启用Safari的滚动行为。
  2. JavaScript调整:通过JavaScript来监听页面高度的变化,并在变化发生时重新加载页面或者重新计算滚动条的位置。
  3. 使用插件或库:可以使用一些第三方插件或库来解决滚动条丢失的问题。例如,可以使用iScroll、BetterScroll等滚动插件来实现自定义滚动条的显示和控制。

总结起来,调整高度时Safari手机滚动条丢失是一个在Safari浏览器上的常见问题,可以通过CSS样式调整、JavaScript调整或使用第三方插件来解决。具体的解决方法可以根据实际情况选择合适的方式来处理。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

「译」前端项目中常见的 CSS 问题

在移动端下,浏览器将会出现水平滚动条。 image.png 左边:出现水平滚动条,并且项目没有换行。右边:项目换行,呈两行显示 解决方法很简单。wrapper 应该在空间不足让项目换行。...长词和链接 在手机屏幕上浏览文章的时候,一个长词或者内联链接可能会导致页面出现水平滚动条。使用 CSS 的 word-break 可以防止这个问题。...透明渐变 当使用透明起点和终点添加渐变的时候,在 Safari 下会呈现一片漆黑。这是因为 Safari 无法识别关键字 transparent。...当视窗高度不足将元素固定在屏幕顶部 如果你在视窗不够高的时候将一个元素固定在屏幕顶部,会发生什么事呢?...RTL 布局中的手机号码 在一个从右到左的布局中添加诸如 + 972-123555777 的手机号码,加号将会位于号码末尾。要修复这个问题,可以重新指定手机号码的方向。

2.1K10

移动端H5坑位指南

弹窗打开后内部内容无法滚动 弹窗关闭后页面滚动位置丢失 Webview能上下滑动露出底色 当打开弹窗给声明position:fixed;left:0;width:100%并动态声明top。...声明position:fixed会导致滚动条消失,此时会发现虽然无滑动穿透,但页面滚动位置早已丢失。...const date = "2019-03-31 21:30:00"; new Date(date.replace(/\-/g, "-")); 复制代码 修复高度坍塌 当页面同时出现以下三个条件,键盘占位会把页面高度压缩一部分...页面高度过小 输入框在页面底部或视窗中下方 输入框聚焦输入文本 只要保持前后滚动条偏移量一致就不会出现上述问题。...在输入框聚焦获取页面当前滚动条偏移量,在输入框失焦赋值页面之前获取的滚动条偏移量,这样就能间接还原页面滚动条偏移量解决页面高度坍塌。

3.5K10
  • 移动端浏览器和微信浏览器上禁止body的滚动条

    ; position: fixed; } 这个就是完全的禁止上下滑动,没有滚动条,且在iOS的safari浏览器上完全不能上下滚,但是确发现微信浏览器上可以上下缩动(下面再解决)。...代码如下: /*去掉手机滑动默认行为*/ $('body').on('touchmove', function (event) { event.preventDefault(); }); 我还收集了一些设置隐藏滚动条的方法...2、给要滚动的元素添加一个父级,设定高度,overflow:auto。 3、html,body{height:100%;overflow:hidden}。...参考:http://www.cnblogs.com/lbcheng/p/6044303.html 经过上面的设置,如果用户在微信浏览器上不能滚动,但是跳出到了iOS的safari浏览器之后,会有很多变数...,比如高度不够,这时滚动也会好一些,那么我这样设置:1、如果在微信上,默认禁止滚动,并且连默认的上下缩滑都不能。

    2.9K10

    中高级前端必须注意的40条移动端H5坑位指南 | 网易三年实践

    弹窗打开后内部内容无法滚动 弹窗关闭后页面滚动位置丢失 Webview能上下滑动露出底色 当打开弹窗给声明position:fixed;left:0;width:100%并动态声明top。...声明position:fixed会导致滚动条消失,此时会发现虽然无滑动穿透,但页面滚动位置早已丢失。...const date = "2019-03-31 21:30:00"; new Date(date.replace(/\-/g, "/")); 修复高度坍塌 当页面同时出现以下三个条件,键盘占位会把页面高度压缩一部分...页面高度过小 输入框在页面底部或视窗中下方 输入框聚焦输入文本 只要保持前后滚动条偏移量一致就不会出现上述问题。...在输入框聚焦获取页面当前滚动条偏移量,在输入框失焦赋值页面之前获取的滚动条偏移量,这样就能间接还原页面滚动条偏移量解决页面高度坍塌。

    4.3K22

    WEBAPP开发技巧总结

    当然,因为这些高端智能手机(Iphone、Android)的内置浏览器都是基于webkit内核的,所以在开发WEBAPP,多数都是使用 HTML5和CSS3技术做UI布局。...因为在触控手机上,为提升用户体验,尽可能的保证用户的可点击区域较大。 6、自适应布局模式 在编写CSS,我不建议前端工程师把容器(不管是外层容器还是内层)的宽度定死。...我们可以利用一句简单的javascript代码来实现这个效果 1 setTimeout(scrollTo,0,0,0); 请注意,这句代码必须放在window.onload里才能够正常的工作,而且你的当前文档的内容高度必须是高于窗口的高度...至少Apple webapp API已经说到了:我们为了让用户在safari中正常的浏览网页,我们必须保证用户的设备处于任何一个方位 safari都能够正常的显示网页内容(也就是自适应),所以我们禁止开发者阻止浏览器的...因为在iOS中没有滚动条的概念,在Android中通过这两个属性可以正常获取到滚动条的值,那么在iOS中我们该如何获 取滚动条的值呢?

    2K20

    小智在这3年开发中遇到的 CSS 问题及解决方案,有大佬帮他总结好了 !

    在下面的例子中,同样的按钮在 Chrome 和 Safari 中,后者添加了默认的灰色背景。 ?...然而,在 Windows上,滚动条总是在那里(即使内容很短)。这是因为无论内容如何,scroll-y都会显示滚动条,这时候我们可以使用overflow: auto,它只会在需要显示滚动条。 ?...在移动设备上,浏览器会显示一个水平滚动条。 ? 解决方法就是使用 flex-wrap: wrap,这样当水平空间不够,浏览器会帮我们自动换行。...长单词和链接 当在移动屏幕上阅读一篇文章,一个长单词或内联链接可能会导致出现水平滚动条。使用CSS word-break可以防止这种情况的发生 ?...压缩或拉伸图像 在CSS中调整图像大小时,如果宽高比与图像的宽度和高度不一致,则可能会对其进行压缩或拉伸。

    3.7K10

    nicegui布局细节补充——容器高度滚动条

    所以,所有的规则设计核心就是:“尽可能展现内容,避免信息丢失” 在 web 中,普通的容器宽度实际上是填满整行的。...除了设置固定的高度值,我们也可以设置一个最大高度: 前面加个 max- 前缀就可以 现在我们总结一个要点, 要让一个容器在内容溢出高度,出现滚动条,必须具备以下条件: 容器本身的高度要被限制,可以是固定高度值...我们很少会说,页面上某个卡片的高度具体是多少。最多我们可能会设置一个最小高度之类(其实也不多见) 更多的情况是,我们希望整体布局刚好铺满整个屏幕,然后里面的某个区域,内容溢出,出现滚动条。...上图,不管浏览器窗口怎么调整,在一定范围内,我不希望整个窗口出现滚动条。但是确实其中两个卡片中的区域,需要展示许多内容。仅限于这些局部地方出现滚动条。...注意,虽然这里表达的是一个百分比,但是参考物是屏幕高度,这是一个确定值,因此,60%的屏幕高度,也是确定值 屏幕高度是可以变化的,比如手动调整浏览器窗口高度

    1.3K10

    纯滚动怎么理解_scrollview不滚动

    scrollWidth表示元素的总宽度,包括由于溢出而无法展示在网页的不可见部分   [注意]IE7-浏览器返回值是不准确的   【1】没有滚动条,scrollHeight与clientHeight...但是由于各个浏览器表现不一样,分为以下几种情况   【1】html元素没有滚动条,IE和firefox的client和scroll属性始终相同,且返回可视区的尺寸大小;而safari和chrome表现正常...document.documentElement.clientHeight,document.documentElement.scrollHeight) 兼容   因此要取得文档实际高度...元素未滚动,scrollLeft的值为0,如果元素被水平滚动了,scrollLeft的值大于0,且表示元素左侧不可见内容的像素宽度   当滚动条滚动到内容底部,符合以下等式 scrollHeight...,具体高度由元素的高度决定   [注意]该方法只有safari支持 <div id="test" style="width: 100px;height: 100px;padding: 10px;margin

    1.9K20

    移动web开发需要注意的二十点

    因为在触控手机上,为提升用户体验,尽可能的保证用户的可点击区域较大。 6、自适应布局模式 在编写CSS,不建议前端工程师把容器(不管是外层容器还是内层)的宽度定死。...我们可以利用一句简单的javascript代码来实现这个效果 setTimeout(scrollTo,0,0,0); 请注意,这句代码必须放在window.onload里才能够正常的工作,而且你的当前文档的内容高度必须是高于窗口的高度...至少Apple webapp API已经说到了:我们为了让用户在safari中正常的浏览网页,我们必须保证用户的设备处于任何一个方位safari都能够正常的显示网页内容(也就是自适应),所以我们禁止开发者阻止浏览器的...因为在iOS中没有滚动条的概念,在Android中通过这两个属性可以正常获取到滚动条的值,那么在iOS中我们该如何获取滚动条的值呢?...20、如何解决iOS 4.3版本中safari对页面中5位数字的自动识别和自动添加样式 新的iOS系统也就是4.3版本,升级后对safari造成了一个bug:即使你添加了如下的meta标签,safari

    1.9K20

    2017移动前端的一些总结web前端 —— 移动端知识的一些总结一.css部分二.js部分

    980)的PC网页 放在手机上显示,倒也能正常显示不出现滚动条,不过是移动设备对页面 做了缩小优化,所以字体等都相应缩小了 (980px是相对于手机像素的,我的是超过1000px多一些就出现滚动条了,这个没具体研究...另外一种情况(一般在页面内容很少时 iphone5及以上常发生),当输入框弹出 fixed元素挤到输入框上,当输入框消失时, fixed元素并没有随着输入框的消失而回到底部,这是因为整个视窗的高度还保持在...减去键盘的 高度,需要手动去触发让视窗高度回到正常,然后试了很多方法都没成功,后来的方案是输入框消失时给页面加隐形的很大的 padding比如 1000px并在 30ms后改为正常 13.禁止用户选中文字...;line-height:1.5rem;overflow:hidden;,在某些 android手机上可能会出现显示不止两行,第三行会显示点头部。...解决:利用 js获取文字 line-height再去设置 div高度  18.使用 background, background-position里使用了比如 center left后不能再加具体的数值去定位

    3.7K40

    实现滚动Header自动隐藏

    这是掘金网页版的头部,当滚动条向下滑动,主header会隐藏,次级header会吸在页面顶部。...你可能会发现在这段代码的上面,还有一段不明所以的代码: if (topArrived) { isHidden.value = false return } 当滚动条到顶部,直接显示header...,这是为了避免iOS设备中safari浏览器橡皮筋效果导致的误判 所以为什么 safari 橡皮筋效果也会触发scroll事件啊啊啊啊啊!!!...前者,可以通过判断y值是否为0(或小于0)来实现;而后者,正常来说,滚动到底部,文档高度-视窗高度应该和滚动条的y值是一致的。...但是在safari里可能不一致,在safari中,当地址栏收缩,上文的公式成立;但是当地址栏是展开状态,两者会一个相差地址栏的高度。而地址栏是否展开我没找到判断的方法。

    2.3K30

    想摸鱼吗?先掌握这 19 个 css 技巧!

    元素的高度与 window 的高度相同 如何使元素与窗口一样高? 答案使用 height: 100vh; 事例地址:https://codepen.io/qianlong/p... 3....使用 flex 布局将一个元素智能地固定在底部 当内容不够,按钮应该在页面的底部。当有足够的内容,按钮应该跟随内容。当你遇到类似的问题,使用 flex 来实现智能的布局。...解决iOS滚动条被卡住的问题 在苹果手机上,经常发生元素在滚动被卡住的情况。这时,可以使用如下的 CSS 来支持弹性滚动。...隐藏滚动条 第一个滚动条是可见的,第二个滚动条是隐藏的。这意味着容器可以被滚动,但滚动条被隐藏起来,就像它是透明的一样。...关键代码: .box-hide-scrollbar::-webkit-scrollbar { display: none; /* Chrome Safari */ } 事例地址:https://codepen.io

    80720

    pc 和 ipad 端网站适配

    pc 端 如何实现字体的自适应 // 根据屏幕大小适配字体 let resetPc = () => { var wH = window.innerHeight; // 当前窗口的高度 var...有一个浮动导航占位符,跟实际浮动导航一样的高度,浮动导航占位符的宽度 width 可以无限大,一般设置为 99999px,足够大,他的父级元素超出隐藏就好了,当实际浮动导航的浮动,浮动占位符占住原先的位置...,大部分手机浏览器都支持 onorientationchange 如果不支持,可以使用原始的 resize resizeEvt = 'orientationchange' in window...Safari webkit 从Safari推出之时起,它的渲染引擎就是Webkit,一提到 webkit,首先想到的便是 chrome,可以说,chrome 将 Webkit内核 深入人心,殊不知,Webkit...的鼻祖其实是 Safari

    2.9K30

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

    这里扩展了解下vh在移动端设备上的部分“特性” 我们依然设置body 100vh的情况下,分别打开微信内置浏览器、Safari浏览器、Google浏览器 从效果图不难看出,在Safari浏览器、Google...浏览器中100vh这个方案都是不完美的,都出现了滚动条,并不能达到我们预期的可视区域的满屏高度。...作为一个cv高手,借助搜索引擎我们了解到,Safari把网址栏与工具栏算进了100vh中,是第一个通过选择根据屏幕的最大高度为vh定义固定值来更新其实现的移动浏览器之一,而后Google浏览器也效仿它。...滚动可见区域会动态变化,如果我们相应地更新CSS视口高度,则需要在滚动过程中更新布局。为了达到更好的用户体验,使用较大的视图尺寸是最好的折衷方案。...document.documentElement.style.setProperty('--vh', `${vh}px`); 这样就成功在:root中创建了--vh的css变量 为了防止旋转屏幕功能的使用,我们需要监听窗口调整大小事件来更新我们创建的

    1.2K20
    领券