23

I have a horizontal div:

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>
4

8 回答 8

42

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

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

如果定位了可滚动，则position()返回#dstElement“.scrollable”的相对位置。

代码和演示

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

于 2013-07-11T17:26:47.423 回答
13

$.scrollTo是你的朋友：

$(container).scrollTo(target)
于 2013-07-10T15:28:54.880 回答
9

没有jQuery：

scrollTo (el) {
  const elLeft = el.offsetLeft + el.offsetWidth;
  const elParentLeft = el.parentNode.offsetLeft + el.parentNode.offsetWidth;

  // check if element not in view
  if (elLeft >= elParentLeft + el.parentNode.scrollLeft) {
    el.parentNode.scrollLeft = elLeft - elParentLeft;
  } else if (elLeft <= el.parentNode.offsetLeft + el.parentNode.scrollLeft) {
    el.parentNode.scrollLeft = el.offsetLeft - el.parentNode.offsetLeft;
  }
}
于 2020-09-07T07:31:32.107 回答
9

尝试以下功能以使元素或 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));
}
于 2015-10-23T07:16:37.400 回答
8

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

  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>

于 2016-11-21T11:58:15.463 回答
3 
$(".ui-jqgrid-bdiv").scrollLeft(400);

这将适用于 jqgrid 以及 div

于 2015-07-10T10:09:31.690 回答
1

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

在这种情况下，我需要移动 .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);

  });
于 2018-03-04T16:04:17.873 回答
-2 

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

于 2019-12-11T07:31:18.797 回答