Question

我正在尝试使用JQUERY从左侧和右侧“动画”出一个长垂直页面。使用jquery，我人为地将它们“移出960像素的网站框架（这样，如果用户没有javascript，图像保持不变）使用这个：

$(".boxtxtleft img").animate({
    left:'+=150',
    opacity: 0
}, 0);
    $(".boxtxtright img").animate({
    left:'-=150',
    opacity: 0
}, 0);

我的问题是，当我将图像的“position：absolute”更改为超出网站框架时，它会在窗口底部添加一个水平滚动条。它还使Safari“缩小”以包含IOS中的所有内容，这两种内容都是不可接受的。

注意：当我在我的960像素容器上使用overflow: hidden;时，那么图像剪辑也是不好的。将溢出放在body标记上也不能解决问题。

提示：我正试图在http://onnit.com/alphabrain上做一个与分子相似的动画，约占页面的50％。

我的网站：如果这可以帮助回答问题，我的网站是：http://satinata.com/index.php?l=1#ingredients

如何在不产生此问题的情况下移动框架外的东西？

修改

以下是我的代码的一部分：

<div class="ingredients">
    <div class="max960">
        <div class="boxtxtright" style="margin-top: 30px;" id="firstingredient">

            <img src="images/aloevera.jpg" alt="Aloes Barbadensis"/>
            <p>TEXT</p>

        </div>
    </div>
</div>

和css：

.ingredients{}
.max960{
    width: 960px;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
}
.boxtxtright{
    float: right;
    width: 500px;
    margin-top: 125px;
    position: relative;
}
.boxtxtright img{
    position: absolute;
    left: -530px;
    z-index: 0;
}

谢谢

Answer 1

经过多次浏览后，我发现如果position:absolute div或图像位于主网站容器之外（在浏览器+ IOS和移动设备中工作），我会发现如何删除水平滚动条。这里＆＃39;如何：

到期的信用额：https://wordimpress.com/how-to-position-elements-to-the-negative-right-position-and-prevent-horizontal-scrollbars/

你的主网站div周围需要一个.wrapper{ min-width: 960px; overflow: hidden; }的带有固定宽度的WRAPPER（例如：.content{ width: 960px;}。你还必须将BODY标记设置为overflow:auto;。现在，元素（div，span等）或想要显示在主.content{}之外而不剪裁或添加水平滚动条的图像必须添加到.content{}内。

以下是您的测试示例代码：

<强> CSS：

body {
    overflow: auto;
}
.wrapper {
    min-width: 960px;
    zoom: 1; /*For ie6*/
    position: relative; /*For ie6/7*/
    overflow: hidden;
}
.content{
    width: 960px;
    height: 700px; /*just for showcasing this demo*/
    background: #555; /*just for showcasing this demo*/
    position: relative;
    top: 0;
}
.right
    position: absolute;
    height: 100px;
    width: 100px;
    top: 0;
    z-index: 100;
    right: -100px;
    background: #999;
}

<强> HTML：

<body>
    <div class="wrapper">

        <div class="content">

            <div class="right"> OUTSIDE </div>

        </div>

    </div>
</body>

最重要的部分是：

正文标记提供了overflow: auto;属性
容器元素有overflow: hidden;
.Right元素在.content div容器

一个div与＆＃34;位置：绝对＆＃34;没有添加水平滚动条

1 个答案: