CODEWITHSUNDEEP
javascriptjquery
Jack The Baker
Jack The Baker

Reputation: 1883

Horizantal scroll right to element

I am trying to scroll to right of each element, but could not calculate right of element and scroll to it.

var $scroller = $('.scroller');
    $('button').on('click', function() {
      var divIdx = $('input').val();

      var scrollTo = $('#d' + divIdx)
        .css('background', '#9f3')
        .position().left;
      console.log(scrollTo);
      $scroller
        .animate({
          'scrollLeft': scrollTo
        }, 500);
    });
.scroller {
   width: 300px;
   height: 100px;
   overflow-x: auto;
   overflow-y: hidden;
   direction: rtl;
 }

 .container {
   position: relative;
   /*important for the .position() method */
   height: 100px;
   width: 770px;
 }

 .container div {
   height: 90px;
   width: 60px;
   float: right;
   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" />

How to calculate right of element and scroll to right of element? How to calculate right of element and scroll to right of element? How to calculate right of element and scroll to right of element?

Upvotes: 0

Views: 104

Answers (3)

akcoban
akcoban

Reputation: 973

You can use this one.

var $scroller = $('.scroller');
$('button').on('click', function() {
  var divIdx = $('input').val();
  var div = $('#d' + divIdx);

  div.css('background', '#9f3');
  var divLeft = div.offset().left;
  var divWidth = div.width();
  var scrollerWidth = $('.scroller').width();

  var scrollTo = divLeft - scrollerWidth + divWidth;

  $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="5" />

Upvotes: 3

Guruling Kumbhar
Guruling Kumbhar

Reputation: 1049

There are two points to consider -

  1. position().left gives you the value of the distance upto left edge of element only. So to get the value upto right edge, you can take left position of the element + the width of the element. $('#d' + divIdx).position().left + $('#d' + divIdx).width()
  2. There should be additional one item's width white space after the last item which allow the scrollbar to move upto the end of the last item.

Upvotes: 0

rafaelcastrocouto
rafaelcastrocouto

Reputation: 12161

You just need to add some right margin and it's all done!

var $scroller = $('.scroller');
$('button').on('click', function() {
  var divIdx = $('input').val();
  var scrollTo = $('#d' + divIdx)
    .css('background', '#9f3')
    .position().left;
  console.log(scrollTo);
  $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: 600px;
 }

 .container div {
   height: 90px;
   width: 60px;
   float: right;
   margin: 5px;
   background: #39f;
 }
 .container div:first-child {
   margin-right: 240px;
 }
 
<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" />

Upvotes: 0

Related Questions