正文{overflow:scroll;}的替代方法是否可以防止页面晃动/扭曲? [英] Alternative To body {overflow:scroll;} That Will Prevent Page Jostling/Wriggling?

问题描述

我花了大约30分钟的时间试图弄清楚为什么我在页面之间导航时网页移动了几个像素.我终于意识到那是因为较长页面上的右侧滚动条弹出并转移了内容.

I was pulling my hair out for about 30 minutes trying to figure out why my webpage was shifting a few pixels when I was navigating between pages. I finally realized that it was because the right scroll bar, on the longer pages, was popping up and shifting stuff over.

我找到了如下解决方案.

I found a solution that goes as follows.

body{
    overflow: scroll;
}

这会强制每个页面都有一个滚动条，因此滚动条的外观/消失不会在您浏览网站时来回晃动几个像素.

This forces every page to have a scroll bar, so the appearance/disappearance of the scroll bar does not jostle the elements of the page back and forth a few pixels as you navigate through the site.

有没有一种更好的方法可以完成我想要的操作而不在右侧渲染无用的滚动条?我想您可以将内容不长的页面偏移几个像素以进行补偿，但是看来您必须跟踪哪些页面具有一定的长度，并根据其CSS切换多少他们拥有的内容会非常烦人.

Is there a better way to accomplish what I want without rendering a useless scroll bar on the right side? I imagine you could offset the pages that don't have very long content a few pixels to compensate, but then it seems like you'd have to keep track of which pages are a certain length, and switch around their CSS depending on how much content they have which would be awfully annoying.

感谢您的任何建议:)

推荐答案

可悲的是，我认为强制滚动条显示是避免页面移位的唯一方法...只需尝试"overflow-y"，因为您不需要水平滚动条

Sadly, i think that forcing scrollbar to show is the only way to avoid page shifting... just try only "overflow-y" as you dont need horizintal scrollbars

这篇关于正文{overflow:scroll;}的替代方法是否可以防止页面晃动/扭曲?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！