CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user4284509
user4284509

Reputation:

jQuery scroll left is not working when using position absolute?

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.net/aja_aja/s9snvk5s/9/

Upvotes: 2

Views: 5312

Answers (2)

Alexander O&#39;Mara
Alexander O&#39;Mara

Reputation: 60527

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

Upvotes: 6

user2505019
user2505019

Reputation: 53

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);
    });

Upvotes: 0

Related Questions