相关疑难解决方法(0)
Overflow-x:hidden不会阻止内容在移动浏览器中溢出
我这里有一个网站.
在桌面浏览器中查看,黑色菜单栏正确地仅延伸到窗口的边缘,因为它body具有overflow-x:hidden.
在任何移动浏览器中,无论是Android还是iOS,黑色菜单栏都会显示其全宽,这会在页面右侧显示空白区域.据我所知,这个空格甚至不是html或body标签的一部分.
即使我将视口设置为以下特定宽度<head>:
<meta name="viewport" content="width=1100, initial-scale=1">
该网站扩展到1100px,但仍然有超过1100的空白.
我错过了什么？如何将视口保持为1100并切断溢出？
推荐指数
解决办法
查看次数
iOS 10 Safari:防止在固定叠加层后面滚动并保持滚动位置
当显示固定位置叠加时,我无法阻止主体内容滚动.类似的问题已被多次询问,但以前工作的所有技术似乎都不适用于iOS 10中的Safari.这似乎是最近的一个问题.
一些说明:
- 如果我都设为我可以禁用滚动
html和body以overflow: hidden,然而,使主体内容滚动到顶部. - 如果覆盖中的内容足够长以便可以滚动,则对主页内容正确禁用滚动.如果叠加层中的内容不足以导致滚动,则可以滚动主页面内容.
- 我在http://blog.christoffer.me/six-things-i-learnt-about-ios-safaris-rubber-band-scrolling/中添加了一个javascript函数,该函数
touchmove在叠加显示时禁用.这在以前工作,但不再有效.
这是完整的HTML源代码:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
font-family: arial;
}
#overlay {
display: none;
position: fixed;
z-index: 9999;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow: scroll;
color: #fff;
background: rgba(0, 0, 0, 0.5);
}
#overlay span {
position: absolute; …推荐指数
解决办法
查看次数
iOS Safari/Chrome - 将输入聚焦在模态内时不需要滚动
在Safari和Chrome中测试过 - 结果相同,所以我认为这是iOS问题.
只有在模态中有输入并且我点击该输入时才会发生这种情况.在输入获得焦点并且原生iOS键盘变得可见的同一时刻.
同一时刻模态下面的页面会自动滚动到其高度的50%.这种行为是完全不需要的,我不知道如何防止这个默认的iOS"功能".
演示:
推荐指数
解决办法
查看次数
如何在 iOS 13 Safari 中禁用身体滚动（当保存为 PWA 到主屏幕时）？
问题：
我知道这个问题已经被问过十几次了，但这些问题的解决方案都不适合我。
我希望 iOS 13 Safari 上的 body 元素不滚动。这意味着没有滚动，也没有弹性反弹（溢出滚动）效果。
我设置了两个彼此相邻的元素overflow: scroll;，它们应该滚动，只是它们周围的主体不应该滚动。
我尝试过的所有解决方案都不适用于头部带有以下标签并保存到主屏幕的渐进式网络应用程序。
<meta name="apple-mobile-web-app-capable" content="yes">
我尝试过的解决方案：
尝试 1：设置隐藏在正文和/或 html 上的溢出。不适用于 iOS 13 Safari。
html {
position: relative;
overflow: hidden;
height: 100%;
}
body {
position: relative;
overflow: hidden;
height: 100%;
}
在 iOS 13 safari 中什么都不做，但在 macOS safari 和 Firefox 中有效。
尝试2：固定在身体上的设置位置。对我不起作用，因为当用户滚动时，主体不会，但滚动仍然阻止我的两个内部元素在溢出反弹动画时滚动。
body {
position: fixed;
}
只将正文放在页面滚动上。滚动（溢出滚动）通过固定体发生......
尝试 3：防止默认触摸移动。没有用（是一个较旧的解决方案......）。
document.addEventListener("touchmove", function (e) {
e.preventDefault();
}, { passive: false });
我什么都不做。不是在 safari …
推荐指数
解决办法
查看次数
iOS上的BootStrap模态背景滚动
所以在iOS上有模态的已知问题,当启用模态时向上/向下滑动将滚动主体而不是模态.
使用bootstrap 3.3.7
试图谷歌它,大多数建议添加
body.modal-open {
overflow: hidden !important;
}
但它不起作用.
有人建议,
body.modal-open {
position: fixed;
}
但背景将跳到页面顶部.
所以现在我正在使用,
body.modal-open {
overflow: hidden !important;
position: fixed;
width: 100%;
}
#exampleModal {
background: black;
}
作为解决方案,所以无法看到跳跃(但仍然明显)
还有其他解决方案吗？
这是我正在研究的网站http://www.einproductions.com/
推荐指数
解决办法
查看次数
body { overflow-x: hidden; } breaks position: sticky
I have an element that I am making sticky with position sticky:
#header {
position: sticky;
width: 100vw;
top: 0;
}
<app-header id="header"></app-header>
And that works fine, but I realised that if I use:
body {
overflow-x: hidden;
}
That breaks sticky, and I need to set body overflow-x to hidden, how can I fix that, with only CSS solution, no JS solutions?
推荐指数
解决办法
查看次数
iOS Chrome/Safari - 将输入聚焦在模态内时不需要滚动
在Safari和Chrome中测试过 - 结果相同,所以我认为这是iOS问题.
只有在模态中有输入并且我点击该输入时才会发生这种情况.在同一时刻,该输入变得焦点,原生iOS键盘变得可见.
同一时刻模态下面的页面会自动滚动到其高度的50%.这种行为是完全不需要的,我不知道如何防止这个默认的iOS"功能".
演示:
推荐指数
解决办法
查看次数
打开菜单时,网站会缩小
我正在使用Yahoo的PureCSS库以及侧边栏的插件,除了移动Safari之外,它在所有浏览器上运行良好.出于某种原因,只要打开菜单,它就会缩小.这甚至发生在文档的示例中.我不知道是什么原因引起了这种情况,但它很容易被称为浏览器错误.
如有必要,我可以把JSFiddle放在一起.
推荐指数
解决办法
查看次数
为什么有些html和body属性会出现这种行为？
我想了解一些事情.
第一个问题:
为什么有一个margin-top上body？
html {
height: 100%;
background-color: red;
}
body {
height: 100%;
margin: 0;
background-color: yellow;
}<h1>Hello Plunker!</h1>如果我在Chrome中查看开发工具检查器,它会向我显示h1上边距位于上边距之外body(图片显示h1突出显示):
第二个问题:
在下一个例子中,为什么黄色被绘制在body？之外？
我希望只在body元素中看到黄色,因为我设置了overflow属性:
body {
height: 100px;
background-color: yellow;
margin: 0;
overflow: hidden;
}第三个问题
如果我background-color在html元素上添加一个,它可以工作,黄色只填充body元素,为什么？
html {
background-color: red;
}
body {
height: 100px;
background-color: yellow;
margin: 0;
overflow: hidden;
}推荐指数
解决办法
查看次数
标签 统计
css ×8
html ×5
ios ×5
javascript ×4
safari ×2
css-position ×1
ios10 ×1
overflow ×1
viewport ×1
yui-pure-css ×1