英文:
horizontal scroll persistently on website
问题
在使用HTML和CSS创建网站时，我发现网站会出现水平滚动条。在使用Chrome DevTools进行检查时，我从未看到是什么原因导致了这个问题。所有元素始终都在页面内，没有任何元素生成超出页面范围的框。即使没有任何元素显示在屏幕上，仍会出现水平滚动条；这种效果在移动屏幕上尤其明显。我可能能够通过以下方式使大屏幕（如笔记本电脑）上的滚动条消失：
body {
width: 95vw;
}
和/或
body {
overflow-x: hidden;
}
但在移动设备上仍然存在。结果是，我制作的每个网站都会有轻微而让人讨厌的左右滚动效果，就像以下示例一样：
以及几乎我曾经构建过的每个具有移动设计的响应式网站。
我已经在互联网上搜索了各种解决方案，包括使用 box-sizing: border-box;、删除/调整任何溢出元素等。我还提出了上面提到的涉及 body 元素的 width: 95vw; 修复方法。我还在这个平台上搜索了答案，并找到了一些答案，比如 这个，让我想知道回答者是否真正在他们自己的代码中遇到过这个问题。所有这些解决方案实际上都不起作用，我很好奇其他人是如何创建不在他们的网站上出现这种令人讨厌的水平滚动条的网站的。
所以，以下是如何重现这个问题的步骤：
<body>
<main>
内容
</main>
<footer>
底部
</footer>
</body>
/* 通用样式 */
@media screen
and (min-width: 300px)
and (orientation: portrait), (orientation: landscape) {
body {
background-color: hsl(0, 0%, 86%);
color: hsl(0, 0%, 8%);
font-family: 'Poppins', sans-serif;
width: 100vw;
margin: auto;
padding: 0;
border: 0;
box-sizing: border-box;
overflow-x: hidden;
}
}
创建后，使用Chrome DevTools在移动手机（iPhone或任何其他类型的手机）的尺寸上查看网站。点击并按住网站，然后拖动它。
真的很希望能有一个持久的解决方案来解决这个问题。
英文:
Whenever I'm creating a website with HTML & CSS, I find that the site acquires a horizontal scroll. On inspection with Chrome DevTools, I never see what is causing the issue. All the elements are always within the page and none of them generate boxes that extend outside of the page. Even without any elements on screen, there would be a horizontal scroll; the effect is especially persistent on mobile screens. I might be able to make the scroll disappear on a large screen like a laptop by doing either
body {
width: 95vw;
}
and/or
body {
overflow-x: hidden;
}
but it never goes away on mobile. The result is a slight, annoying, left-right motion on any website I ever make, like the following:
- landing page for a fictional agency (Frontend Mentor project)
- a feature section component (Frontend Mentor project)
- an order summary component (Frontend Mentor project)
- My hobby website
and pretty much every other responsive website I've ever built that has a mobile design.
I've scoured the internet for solutions and I've gotten things like 'use box-sizing: border-box;', 'remove/resize any overflowing elements', etc. I also came up with the fix I mentioned above involving width: 95vw; for the body element. I've also searched this platform for answers and come across some, like this, that make me wonder if the answerers have ever actually come across the problem in their own code before. None of these solutions actually ever work and I'm curious as to how everyone else makes websites that don't have this nagging horizontal scroll in their websites.
So here's how to reproduce the issue.
<body>
<main>
stuff
</main>
<footer>
feet
</footer>
</body>
/* General Styles */
@media screen
and (min-width: 300px)
and (orientation: portrait), (orientation: landscape) {
body {
background-color: hsl(0, 0%, 86%);
color: hsl(0, 0%, 8%);
font-family: 'Poppins', sans-serif;
width: 100vw;
margin: auto;
padding: 0;
border: 0;
box-sizing: border-box;
overflow-x: hidden;
}
}
When created, view the website on Chrome DevTools on a mobile phone's dimensions whether iPhone or any other kind of phone. Tap and hold the site and drag it around.
Would really appreciate a lasting fix for this
答案1
得分: 1
使用这个，它会移除超出内容区域的部分：
width: 100vw !important;
overflow-x: clip !important;
不要使用 overflow-x: hidden，因为它仍然无法阻止子元素超出边界。我在您的网站上尝试应用上述代码，它有效果。
英文:
Use this, what it will do is remove whatever is exceding the body:
width: 100vw !important;
overflow-x: clip !important;
do not use overflow-x: hidden as still it will not stop the children from going out of boundaries. I tried applying the above code on your websites, and it works.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论