Question

我想在div中自动滚动但我的代码滚动整个页面。我该怎么做才能只在div中滚动？

代码：

<div class="banner">
    div class="logo"></div>
</div>
<div id="container">
    <div class="tile"></div>
    .
    .
    .
</div>

CSS：

.banner{
    position: absolute;
    width: 100%;
    height: 50px;
    margin-top: 5px;
    margin-bottom: 5px;
}

.logo{
    background-image: url(image.png) center no-repeat;
}

#container{
    width: 1800px;
    height: 1050px;
    position: absolute;
}

在JQuery中：

var scrollWidth = $("#container").width();
var scrollHeight = $("#container").height();
$("#container").velocity("scroll", {
    axis: "x",
    duration: 10000,
    offset: scrollWidth 
})
.velocity("scroll", {
    axis: "y",
    duration: 10000,
    offset: scrollHeight 
});

我上面提供的代码将与.banner一起滚动，但我想在自动滚动#container div时修复位置。我使用velocity.js进行自动滚动。

Answer 1

如果您在#container内滚动，则必须在力度动画上提供container属性，请检查Julian Shapiro demo

另一种解决方案可以将banner的位置设置为fixed而不是绝对

自动滚动div而不使用velocity.js移动整个页面

1 个答案: