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

jQueryWeb DevelopmentFront End Technology

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>
raja
Published on 18-Dec-2017 09:14:27
Advertisements