使用绝对位置时,jQuery向左滚动不起作用?

时间:2015-03-26 06:35:27

标签: javascript jquery html css

我的HTML就像这样

<body>
  <div id="next" style="postion:fixed;">Next<br><br></div>
  <div id="container">
    <div id="cont">
     <div class="Element" style="background:blue; left:0; "></div>
     <div class="Element" style="background:orange; left:100%;"></div>
     <div class="Element" style="background:pink; left:200%;"></div>
  </div>
</div>

我的js for scroll-left

$('#next').click(function() {   
    $('#container').animate({
        scrollLeft: $('#container').scrollLeft() + 400
    });
});

CSS

#container{
overflow-x:hidden; 
overflow-y:hidden;
}
.Element{
width:100%; 
height:50%;
position:absolute;
height:50%;
}

我尝试使用带有position:absolute功能的scrollLeft显示div标签。但是,对于position:absolute,scrolllleft无效。但position:relative工作正常。我想用滚动选项显示位置绝对的div标签?我该怎么办?

的jsfiddle

http://jsfiddle.net/aja_aja/s9snvk5s/9/

2 个答案:

答案 0 :(得分:5)

您的#container元素需要设置类似overflow: auto的{​​{3}}属性才能使元素可滚动。默认情况下,overflowvisible,表示该元素不会滚动。您还需要向#container添加定位,并设置widthheight

工作示例(overflow):

&#13;
&#13;
$('#next').click(function() {	
    $('#container').animate({
        scrollLeft: $('#container').scrollLeft() + 400
    });
});
&#13;
.Element {
    padding:0px;
    width:100%;
    position:absolute;
    height:100%;
}

#container {
    position: relative;
    width: 400px;
    height: 200px;
    overflow: auto;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="next" style="postion:fixed;">Next
    <br>
    <br>
</div>
<div id="container">
    <div id="cont">
        <div class="Element" style="background:blue; left:0;">aaa</div>
        <div class="Element" style="background:orange; left:100%;">bbb</div>
        <div class="Element" style="background:yellow; left:200%;">ccc</div>
    </div>
</div>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

使用以下代码向左滚动。

 $('#next').click(function() {  
        $('html, body').animate({
                  scrollLeft: 500
    }, 800);
    });

其中500是保证金,800是速度。

编辑:

如果你想将容器移到左边。使用以下代码。

 $('#next').click(function() {  

        $("#container").animate({
    'marginLeft': '-=450px'
}, 500);
    });