滚动到水平div中的元素

Question

我有一个横向div：

我需要通过JavaScript按钮滚动到此div中的特定元素（必须将click div滚动到该元素之后）。我怎样才能做到这一点？

<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

$.scrollTo是你的朋友：

$(container).scrollTo(target)

Answer 2

或者您可以使用以下代码段：

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

如果可滚动定位，position()将#dstElement的相对位置返回到`.scrollable'。

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

Answer 3

尝试使用以下功能在点击中将元素或li置于中心

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 4

下面的代码应该可以解决问题：

  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 5

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

这将适用于jqgrid以及div

Answer 6

如果你有一个具有内部水平滚动的元素，你可以按照我的示例执行：使用两个带有类的箭头，将元素滚动到两侧。

在这种情况下，我有类.tabs，我需要移动。 500是设置此滚动动画的时间（以毫秒为单位），因此您可以拥有自己的滑块。

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);

  });