水平滚动到元素

Question

我试图滚动到每个元素的右边，但是无法计算元素的右边并滚动到它。

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" />

如何计算元素的右边并滚动到元素的右边？ 如何计算元素的右边并滚动到元素的右边？ 如何计算元素的右边并滚动到元素的右边？

Answer 1

您可以使用这个。

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" />

Answer 2

您只需要添加一些右边距就可以了！

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" />

Answer 3

有两点要考虑-

1. position（）。left仅提供到元素左边缘的距离值。因此，要使值达到右边缘，可以采用元素的左侧位置+元素的宽度。 $('#d' + divIdx).position().left + $('#d' + divIdx).width()
2. 最后一项之后应该有一个项的宽度空白，以使滚动条向上移动到最后一项的末尾。