scroll to element in horizontal div

Question

I have a horizontal div:

i need to scroll to the specific element in this div via JavaScript button (after the click div must be scrolled to that element). How can I do this?

<div class="group" id="frames">
<div class="item frames-item">
<img src="1.jpg">
</div>
<div class="item frames-item">    
<img src="2.jpg">
</div>
....
....
</div>

Answer 1

    var $scroller = $('.scroller');
    // assign click handler
    $('button').on('click', function () {       
        // get the partial id of the div to scroll to
        var divIdx = $('input').val();          
        
        // retrieve the jquery ref to the div
        var scrollTo = $('#d'+divIdx)           
            // change its bg
            .css('background', '#9f3')          
            // retrieve its position relative to its parent
            .position().left;                   
        console.log(scrollTo);
        // simply update the scroll of the scroller
        // $('.scroller').scrollLeft(scrollTo); 
        // use an animation to scroll to the destination
        $scroller
          .animate({'scrollLeft': scrollTo}, 500);    
    });

    .scroller {
        width: 300px;
        height: 100px;
        overflow-x: auto;
        overflow-y: hidden;
    }
    .container {
        position: relative; /*important for the .position() method */
        height: 100px;
        width: 770px;
    }
    .container div {
        height: 90px;
        width: 60px;
        float: left;
        margin: 5px;
        background: #39f;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scroller">
        <div class="container">
            <div id="d1"></div>
            <div id="d2"></div>
            <div id="d3"></div>
            <div id="d4"></div>
            <div id="d5"></div>
            <div id="d6"></div>
            <div id="d7"></div>
           <!-- ... -->           
        </div>
    </div>
    <button>Scroll to: </button> <input type="text" value="7"/>

Answer 2

Try below function to make element or li in center on click

function centerItVariableWidth(target, outer){
  var out = $(outer);
  var tar = $(target);
  var x = out.width();
  var y = tar.outerWidth(true);
  var z = tar.index();
  var q = 0;
  var m = out.find('li');
  //Just need to add up the width of all the elements before our target. 
  for(var i = 0; i < z; i++){
    q+= $(m[i]).outerWidth(true);
  }
  out.scrollLeft(Math.max(0, q - (x - y)/2));
}

Answer 3

$(".ui-jqgrid-bdiv").scrollLeft(400);

This will work in jqgrid as well as div

Answer 4

If you have an element, that has inner horizontal scroll, you can do as followed by my example: Two arrows with classes that are used, will scroll the element to sides.

In this case, I have with class .tabs which I need to move. The 500 is time in miliseconds to animate this scroll, so you can kind of have your own slider..

var scroll = 0;
  $('.js-move-list-right').click(function(){
    scroll = scroll + 400;
    $('#timeline .tabs').animate({scrollLeft: scroll}, 500);
  });
  $('.js-move-list-left').click(function(){
      scroll = scroll - 400;
      $('#timeline .tabs').animate({scrollLeft: scroll}, 500);

  });

Answer 5

The code below should do the trick:

  document.addEventListener('DOMContentLoaded', function () {
      var frames = document.getElementById('frames');
      frames.addEventListener('click', function (e) {
          if (e.target.classList.contains('item')) {
              e.target.parentNode.scrollLeft = e.target.offsetLeft;

          }
      });
  });

        body {
            background: red;
        }
        .group{
            width: 300px;
            display: flex;
            position: relative; /* This is important for the js offsetLeft property */
            overflow-x: scroll;
        }
    
        .item{
            width: 200px;
            background: #eee;
            margin-right: 10px;
        }

    <div class="group" id="frames">
        <div class="item frames-item">paul</div>
        <div class="item frames-item">coucou</div>
        <div class="item frames-item">jojoij</div>
        <div class="item frames-item">zoie</div>
        <div class="item frames-item">foez</div>
        <div class="item frames-item">popze</div>
        <div class="item frames-item">kvk</div>
        <div class="item frames-item">poe</div>
        <div class="item frames-item">hfihuazf</div>
        <div class="item frames-item">jeeze</div>
        <div class="item frames-item">pposd</div>
        <div class="item frames-item">nvnn</div>
    </div>
    

Answer 6

Or you could use the following snippet:

$('.scrollable').animate({scrollLeft: $('#dstElement').position().left}, 500);

Where position() returns the #dstElement's relative position to `.scrollable' if scrollable is positioned.

Code & Demo

    var $scroller = $('.scroller');
    // assign click handler
    $('button').on('click', function () {       
        // get the partial id of the div to scroll to
        var divIdx = $('input').val();          
        
        // retrieve the jquery ref to the div
        var scrollTo = $('#d'+divIdx)           
            // change its bg
            .css('background', '#9f3')          
            // retrieve its position relative to its parent
            .position().left;                   
        console.log(scrollTo);
        // simply update the scroll of the scroller
        // $('.scroller').scrollLeft(scrollTo); 
        // use an animation to scroll to the destination
        $scroller
          .animate({'scrollLeft': scrollTo}, 500);    
    });

    .scroller {
        width: 300px;
        height: 100px;
        overflow-x: auto;
        overflow-y: hidden;
    }
    .container {
        position: relative; /*important for the .position() method */
        height: 100px;
        width: 770px;
    }
    .container div {
        height: 90px;
        width: 60px;
        float: left;
        margin: 5px;
        background: #39f;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scroller">
        <div class="container">
            <div id="d1"></div>
            <div id="d2"></div>
            <div id="d3"></div>
            <div id="d4"></div>
            <div id="d5"></div>
            <div id="d6"></div>
            <div id="d7"></div>
           <!-- ... -->           
        </div>
    </div>
    <button>Scroll to: </button> <input type="text" value="4"/>