我无法在我的网页上禁用 scroll-x，我已经尝试了一切答案

【问题标题】：I can't disable scroll-x on my webpage, I've already tried everything我无法在我的网页上禁用 scroll-x，我已经尝试了一切
【发布时间】：2021-01-08 22:19:05
【问题描述】：

* {
    padding:0;
    margin:0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

section {
    width: 100%;
    max-width: 720px;
    margin: auto;
}

article {
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
    border-bottom: 2px solid #eee;
    padding: 20px 0;
}

h1, h2, h3 {
    text-align: center;
}

img {
    display: block;
    margin: 5px 0;
}

button {
    padding: 5px 10px;
    background-color: brown;
    color: white;
    font-weight: 400;
    border: none;
    border-radius: 5px;
    font-size: 1em;
    margin: 5px 0;
    cursor: pointer;
}

p {
    padding: 5px 10px;
    font-size: 1rem;
    width: 100%;
}

ul {
    padding-left: 30px;
    width: 100%;
}

code {
    font-family: monospace;
    background-color: darkblue;
    color: white;
    border-radius: 5px;
    padding: 0 5px;
}

code.block {
    display: block;
    width: 90%;
    padding: 10px;
    margin: 5px;
}

p .ejemplo {
    text-align: center;
}

.responsive-table {
    max-width: 100%;
    overflow-x: auto;
}

table {
    border-collapse: collapse;
    border: 1px solid #ccc;
}

table td, th {
    padding: 8px;
}

table tr:nth-child(odd) {
    background: #eee;
}

<body>
    <header>
        <h1>Apuntes de JavaScript</h1>
    </header>
    <section>
        <!------------CAPITULO 1------------>
        <article>
            <h2>#1- Introducción</h2>
            <h3>Manipular elementos HTML</h3>
            <p>Con JavaScript puedes cambiar y manipular <b>contenido</b> HTML.</p>
            <p>Hay un método denominado <code>.getElementById()</code> que se usa para 
                seleccionar un elemento dentro del HTML.</p>
            <p class="ejemplo" id="ej1">Al tocar el botón cambiará este texto.</p>
            <button type="button" onclick="document.getElementById('ej1').innerHTML='Este es el texto nuevo.'">
                Click aquí!</button>
        </article>
    </section>
</body>
</html>

我已经尝试过overflow: hidden 及其所有变体。我试过最大宽度，我删除了填充我什至逐行删除了整个文档，使其完全为空，但在我的浏览器中，当我将其放入移动尺寸时，滚动仍然存在。我使用谷歌浏览器。有人知道我会发生什么吗？

我不知道这是怎么回事

【问题讨论】：

请附上代码。

标签： html css google-chrome scroll responsive-design

【解决方案1】：

这个问题不够清晰，但我推测问题可能不在于您的内容溢出。也许问题只是你想隐藏滚动条？如果是这样，这个 css 可能是您正在寻找的解决方案：

/* Hide scrollbar for Chrome, Safari and Opera */
.example::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.example {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

在此处查看更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar

【讨论】：