禁用 div/img 上的垂直滚动答案

【问题标题】：disable vertical scrolling on a div/img禁用 div/img 上的垂直滚动
【发布时间】：2013-09-17 04:55:03
【问题描述】：

我的网站上有一个带有大图片（1000 像素宽度）的标题。此图像居中（水平）。如果用户使用宽度小于 1000 像素的浏览器窗口访问此网站，则他可以水平滚动。这是我想阻止的，因为图像的外部部分并不重要，并且页面的其余部分与用户浏览器窗口一样宽。

例如：用户浏览器窗口的宽度为 600px，我希望发生的是：

图像的前 200px 是不可见的，接下来的 600px 是可见的，图像的最后 200px 又是不可见的。

<html>
<body>
    <div id="outer" style="width:100%;overflow-x:hidden;">  
        <div id="inner" style="display: table;margin: 0 auto;width:1300px">
            <img src="image.jpg" alt="image" width="1300px">
        </div>
    </div>
</body>
</html>

【问题讨论】：

我来寻找“禁用垂直滚动”，你说 “如果用户使用宽度小于 1000px 的浏览器窗口访问此网站，他可以水平滚动。这是我想阻止什么”。所以我将标题编辑为“禁用水平”而不是“禁用垂直”。但是后来我在我正在使用的 div 上尝试了溢出-y 和溢出-x，并得到了意想不到的结果，所以也许我遗漏了一些东西......？所以我把它改回来了。 我应该知道最好不要尝试干预 CSS 问题。 :-)

标签： css html browser horizontal-scrolling

【解决方案1】：

您需要为此使用 CSS。

div {
    overflow-x: hidden;
}

【讨论】：

您能否建议我如何在浏览器宽度过小时使左侧消失的图像居中？右侧现在可以正常工作了！

【解决方案2】：

如果您只是将其设置为背景图像，它应该可以自己工作，居中。您需要将它放在一个 div 上，该 div 应用了 100% 宽度，并指定了一个高度，以便展开 div 以查看任何内容。

【讨论】：

是的，显示它有背景图片。
虽然这适用于图像，但我更喜欢 user1 的答案，它也适用于任何 div。但是谢谢你的回答！

【解决方案3】：

试试position: fixed; 这固定了位置并且不允许任何滚动

【讨论】：

这不是一个好的解决方案，位置固定，没有js你将无法将div移出屏幕。

【解决方案4】：

你可以用 background-size:cover 来做到这一点

css

main-page { // making a container for demonstration purposes
  display: block; // custom tags need a display, block forces 100% width
  max-width: 1000px; // just matching your image width
  margin: 0 auto; // centering if window is bigger than max-width
}

banner-image {
  display: block; // custom tag needs a display
  height: 80px; // set to the height of your image
  background:
    no-repeat
    url('https://www.w3schools.com/cssref/mountain.jpg')
    50% 50% / cover; // center then cover the element completely
  }

HTML 注释：我正在使用自定义标签

<main-page>
  <banner-image></banner-image>
</main-page>

【讨论】：