我有一个网站与中心对齐的DIV。现在,一些页面需要滚动,一些不需要。当我从一种类型移动到另一种类型时,滚动条的出现将页面移向一侧几个像素。有没有什么方法可以避免这种情况,而不显式地在每个页面上显示滚动条?
当前回答
扩展Rapti的答案,这应该是一样的工作,但它增加了更多的边距正文的右侧,并隐藏它与负html边距,而不是增加额外的填充,可能会影响页面的布局。这样,实际页面(在大多数情况下)不会发生任何更改,代码仍然具有功能。
html {
margin-right: calc(100% - 100vw);
}
body {
margin-right: calc(100vw - 100%);
}
其他回答
我不知道这是否是一个旧帖子,但我有同样的问题,如果你想垂直滚动,你应该尝试溢出-y:滚动
扩展Rapti的答案,这应该是一样的工作,但它增加了更多的边距正文的右侧,并隐藏它与负html边距,而不是增加额外的填充,可能会影响页面的布局。这样,实际页面(在大多数情况下)不会发生任何更改,代码仍然具有功能。
html {
margin-right: calc(100% - 100vw);
}
body {
margin-right: calc(100vw - 100%);
}
我不这么认为。但样式体与溢出:滚动应该做。不过你好像知道。
由于我还没有找到我的解决方案,我想补充它:
我不想要一个永久的滚动条(已接受的解决方案),我也决定不使用负边距。他们没有(立即)为我在chrome浏览器工作,我也不希望有内容可能消失在滚动条下面。
这是一个填充解决方案。
我的网页由三部分组成:
标题(内容左对齐) MainContent(内容居中) 页脚(内容左右对齐)
因为左边填充会让标题看起来很糟糕,而且logo应该留在页面的角落,所以我保持它不变,因为滚动条的出现在大多数情况下不会影响它(除非窗口宽度非常小)。
因为均匀的填充对于MainContent和footer都是可以接受的,我只对这两个容器使用下面的css:
.main-content, .footer {
/*
* Set the padding to the maximum scrollbar width minus the actual scrollbar width.
* Maximum scrollbar width is 17px according to: https://codepen.io/sambible/post/browser-scrollbar-widths
*/
padding-right: calc(17px - (100vw - 100%));
padding-left: 17px;
}
这将保持MainContent在正确的中心,也适用于所有滚动条宽度不超过17px的滚动条。可以为具有覆盖滚动条的移动设备添加一个媒体查询,删除这些填充。 这个解决方案类似于只添加左侧填充,并设置宽度为“width: calc(100vw - 17px);”。但我不能说它是否在所有情况下都一样。
如果改变大小或加载一些数据后,它是添加滚动条,然后你可以尝试以下,创建类和应用这个类。
.auto-scroll {
overflow-y: overlay;
overflow-x: overlay;
}
推荐文章
- 使伸缩项目正确浮动
- 如何取消最大高度?
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何选择在最后一个子元素之前的元素?
- 如何触发自动填充在谷歌Chrome?
- CSS变换,锯齿边缘在铬
- 创建圈div比使用图像更容易的方法?
- 强迫孩子服从父母的弯曲边界在CSS
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 在CSS中@apply是什么?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?