css - 禁用媒体查询的属性

Question

我用纯 html/css 制作了一些网站。

我定义了 overflow-y:当浏览器全屏时滚动到某个元素。

但是当屏幕的宽度小于 400px 时，我想禁用它。 (比如，overflow-y: none。但是 overflow-y 没有)

有什么解决办法吗？

Answer 1

你可以只使用 ***overflow: auto;

然后它工作正常见示例。

#overflowTest {
    background: #4CAF50;
    color: white;
    padding: 15px;
    width: 200px;
    height: 200px;
    overflow: scroll;
    border: 1px solid #ccc;
}
#overflowauto {
    background: #4CAF50;
    color: white;
    padding: 15px;
    width: 200px;
    height: 200px;
    overflow: auto;
    border: 1px solid #ccc;
}

<h2>overflow scroll</h2>
<div id="overflowTest">This text is really long and the height of its container is only 100 pixels. Therefore, a scrollbar is added to help the reader to scroll the content. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </div>

<h2>overflow auto</h2>
<div id="overflowauto">This text is really long and the height of its container is only 100 pixels. Therefore, a scrollbar is added to help the reader to scroll the content. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt property-on-media-query# laoreet dolore magna aliquam erat volutpat. </div>

您可以了解有关溢出属性的更多信息 https://www.w3schools.com/css/css_overflow.asp

--- 谢谢 ---