Question

我在网页上遇到大图片时出现问题，我似乎无法避免在某些浏览器上导致滚动。到目前为止，我只能在Safari上看到它，但我的朋友显然也看到它在Chrome上。

我所做的一切，就是将图像绝对定位在其容器内，然后将其向右移动，使其实际位于容器和包装器之外。问题是，它的图像非常大，因此在某些浏览器中，您可以向右滚动显示图像的其余部分。这是代码。

<html>
<head>
    <style>
        body{
            background: aqua;
            margin: 0;
            overflow-x: hidden;
        }
        #wrapper{
            background: #fff;
            width: 960px;
            height: 100%;
            margin: 0 auto;
        }
        #content{
            width: 960px;
            height: 500px;
            background: yellow; 
            position: relative;
        }
        #image{
            position: absolute;
            bottom: 0;
            right: -320px;
            z-index: 0;
            width: 1210px;
            height: 468px;
            background: red;
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <div id="content">
            <div id="image"></div>
        </div>
    </div>
</body>
</html>

并且是一个声明它的小提琴：http://jsfiddle.net/alsweeet/5mqHf/

将overflow-x：hidden添加到正文样式似乎解决了大多数浏览器中的问题，但不是safari。你会看到我还没有将它添加到小提琴演示中，一旦你添加它，你将无法向左或向右滚动，这是我试图实现跨浏览器的效果。

我肯定会对此提出一些建议。我敢肯定，除了绝对定位之外，可能还有更好的方法。

谢谢！

Alsweeet

编辑：问题也发生在Chrome上，滚动条被隐藏，但您仍然可以侧向滚动。虽然在火狐中仍然可以正常工作。

编辑：这是一个屏幕截图，以帮助解释我想要实现的目标，没有任何侧面滚动。红色框是引起侧滚动的框。您可以看到红色框位于960包装器之外。

enter image description here

Answer 1

overflow-x：不完全跨浏览器兼容，尝试使用overflow:hidden;，只要您不需要在元素上滚动垂直，那么这将永远不会引起您的问题。

在元素上使用overflow-y并在另一个元素上限制overflow-x的解决方法就是这个小提琴。

http://jsfiddle.net/5mqHf/7/ - 修复图片位置

对此的考虑是，如果要垂直滚动，在查看图像元素的宽度时，需要考虑滚动条的wdtih以避免水平滚动条，这通常在15px和30px，具体取决于浏览器。

Answer 2

这是你在找什么？

<强>样本

http://jsfiddle.net/5mqHf/4/

Answer 3

请看一下。它符合您的要求。如果没有，请告诉我，以便我可以尝试更多。

<强>样本

http://jsfiddle.net/saorabhkr/FyJ4F/

大图像导致浏览器滚动

3 个答案: