滚动到水平div中的元素

我有一个横向div：

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

 
  
 
  
 .... ....  

Answer 1

$ .scrollTo是你的朋友：

 $(container).scrollTo(target) 

Answer 2

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

 $('.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; } 

  
 
 
 
 
 
 
 
 
  
 
 Scroll to:   

Answer 3

尝试使用以下function在点击中将元素或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

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

这将适用于jqgrid以及div

Answer 5

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

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

  
 
paul
 
coucou
 
jojoij
 
zoie
 
foez
 
popze
 
kvk
 
poe
 
hfihuazf
 
jeeze
 
pposd
 
nvnn
  

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