Teach with us

How to find left position of element in horizontal scroll container using jQuery?

To find the left position of element in horizontal scroll container using jQuery, use the animate() function with the scrollLeft() function.

Example

You can try to run the following code to learn how to find left position of an element in horizontal scroll container:

Live Demo

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
   
   var scrollArea = $('#box');
   var toScroll = $('#box .myclass');

   function myScroll() {
     toScroll.each(function() {
        var self = $(this);
        $(this).css('cursor', 'pointer');
        $(this).on('click', function () {
            var leftOffset = self.offset().left - scrollArea.offset().left +    scrollArea.scrollLeft();
            scrollArea.animate({ scrollLeft: leftOffset });
            alert(leftOffset);
        });    
     });
   };
 myScroll();
});
</script>
<style>
#box {
    width: 250px;
    height: 300px;
    margin-left: 20px;
    border: 1px solid black;
    overflow-x: scroll;
    white-space: nowrap;
}
.myclass {
    width: 250px;
    height: 100px;
    margin: 35px;
    display: inline-block;
    background: -webkit-linear-gradient(left, red , blue);
    background: -o-linear-gradient(right, red, blue);
    background: -moz-linear-gradient(right, red, blue);
    background: linear-gradient(to right, red , blue);
}
</style>
</head>
<body>
    <p>Get left position of element.</p>
<div id="box">
    <div class="myclass">First (Click Me)</div>
    <div class="myclass">Second (Click Me)</div>
    <div class="myclass">Third (Click Me)</div>
</div>

</body>
</html>
Updated on 10-Dec-2019 07:42:23

0 Views

Tutorials Point

Previous Page Next Page  
Advertisements