admin管理员组

文章数量:1404765

My HTML like this 

<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>

My 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%;
}

I tried to display the div tag with position:absolute with scrollLeft function. But scrollleft is not working on position:absolute. But position:relative is works fine. I want to display the div tag with position absolute with scrolling option? How can i do it?

JSFiddle

/

My HTML like this 

<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>

My 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%;
}

I tried to display the div tag with position:absolute with scrollLeft function. But scrollleft is not working on position:absolute. But position:relative is works fine. I want to display the div tag with position absolute with scrolling option? How can i do it?

JSFiddle

http://jsfiddle/aja_aja/s9snvk5s/9/

  • javascript
  • jquery
  • html
  • css
Share Improve this question edited Mar 26, 2015 at 8:46 asked Mar 26, 2015 at 6:35 user4284509user4284509 5
  • can you provide a fiddle.?? – Guruprasad J Rao Commented Mar 26, 2015 at 6:46
  • You have a typo in 'style="postion:fixed;"' at first line – Tien Nguyen Commented Mar 26, 2015 at 7:13
  • @TienNguyen This is just for display Next div tag. It is not a problem – user4284509 Commented Mar 26, 2015 at 7:16
  • Please provide a jsfiddle with your html included – AndrewL64 Commented Mar 26, 2015 at 7:19
  • @AndrewLyndem I edited my question. I want to scroll the container in left with position absolute. I dont know how to use the fiddle. I tried, but not get. – user4284509 Commented Mar 26, 2015 at 8:34
Add a ment  | 

2 Answers 2

Reset to default 6 +50

Your #container element needs to have the overflow property set something like overflow: auto in order to make the element scrollable. By default, the overflow is visible which mean the element does not scroll. You will also need to add positioning to the #container, and set the width and height.

Working Example (JSFiddle):

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

#container {
    position: relative;
    width: 400px;
    height: 200px;
    overflow: auto;
}
<script src="https://ajax.googleapis./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>

Use the following code to scroll left.

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

Where 500 is the margin and 800 is speed.

Edit:

And if you want to move container to the left. Use the following code.

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

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

本文标签： javascriptjQuery scroll left is not working when using position absoluteStack Overflow

版权声明：本文标题：javascript - jQuery scroll left is not working when using position absolute? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744843253a2628052.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。