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

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

JSFiddle

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

Share Improve this question edited Mar 26, 2015 at 8:46 asked Mar 26, 2015 at 6:35 user4284509

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

Sorted by: 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);
    });

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - jQuery scroll left is not working when using position absolute? - Stack Overflow

2 Answers 2

Working Example (JSFiddle):

与本文相关的文章

评论列表(0)