Javascript 滚动到水平div中的元素

我有一个水平div：

我需要通过JavaScript按钮滚动到此div中的特定元素（单击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>

....
....

是你的朋友：

$(container).scrollTo(target)

---

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

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

其中返回

#dst元素

相对于“.scrollable”的相对位置（如果已定位scrollable）

代码与演示

var$scroller=$（'.scroller'）；
//分配单击处理程序
$（'button'）。在（'click'，函数（）{
//获取要滚动到的div的部分id
var divIdx=$（'input'）.val（）；
//检索div的jquery引用
var scrollTo=$（'#d'+divIdx）
//改变背景
.css（'background'，'#9f3'）
//检索其相对于其父对象的位置
.位置（）。左侧；
console.log（scrollTo）；
//只需更新滚动条的滚动条
//$（'.scroller'）.scrollLeft（scrollTo）；
//使用动画滚动到目标
$scroller
.animate（{'scrollLeft'：scrollTo}，500）；
});
.scroller{
宽度：300px；
高度：100px；
溢出-x：自动；
溢出y：隐藏；
}
.集装箱{
position:relative；/*对于.position（）方法很重要*/
高度：100px；
宽度：770px；
}
.货柜组{
高度：90px；
宽度：60px；
浮动：左；
保证金：5px；
背景：#39f；
}

滚动至：
这将在jqgrid和div中工作
请尝试下面的函数，使元素或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));
}

功能中心可变宽度（目标、外部）{
var out=$（外部）；
var tar=$（目标）；
var x=out.width（）；
var y=焦油外径（真）；
var z=tar.index（）；
var q=0；
var m=out.find（'li'）；
//只需要在我们的目标之前加上所有元素的宽度。
对于（变量i=0；i
下面的代码应该可以做到这一点：


document.addEventListener（'DOMContentLoaded'，函数（）{
var frames=document.getElementById（'frames'）；
frames.addEventListener（'click'，函数（e）{
if（e.target.classList.contains（'item'））{
e、 target.parentNode.scrollLeft=e.target.offsetLeft；
}
});
});
正文{
背景：红色；
}
.组{
宽度：300px；
显示器：flex；
position:relative；/*这对于js offsetLeft属性很重要*/
溢出-x：滚动；
}
.项目{
宽度：200px；
背景：#eee；
右边距：10px；
}

保罗
库库
乔乔伊
佐伊
福兹
爆米花
kvk
爱伦·坡
hfihuazf
嘲笑
PPOD
nvnn
如果您有一个元素，它具有内部水平滚动，您可以按照下面的示例进行操作：使用两个带有类的箭头，将元素滚动到两侧

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

  });


var$scroller=$（'.scroller'）；
//分配单击处理程序
$（'button'）。在（'click'，函数（）{
//获取要滚动到的div的部分id
var divIdx=$（'input'）.val（）；
//检索div的jquery引用
var scrollTo=$（'#d'+divIdx）
//改变背景
.css（'background'，'#9f3'）
//检索其相对于其父对象的位置
.位置（）。左侧；
console.log（scrollTo）；
//只需更新滚动条的滚动条
//$（'.scroller'）.scrollLeft（scrollTo）；
//使用动画滚动到目标
$scroller
.animate（{'scrollLeft'：scrollTo}，500）；
});
.scroller{
宽度：300px；
高度：100px；
溢出-x：自动；
溢出y：隐藏；
}
.集装箱{
position:relative；/*对于.position（）方法很重要*/
高度：100px；
宽度：770px；
}
.货柜组{
高度：90px；
宽度：60px；
浮动：左；
保证金：5px；
背景：#39f；
}

滚动至：
，不带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;
  }
}

滚动到（el）{
常数elLeft=el.offsetLeft+el.offsetWidth；
const elParentLeft=el.parentNode.offsetLeft+el.parentNode.offsetWidth；
//检查元素是否不在视图中
如果（elLeft>=elParentLeft+el.parentNode.scrollLeft）{
el.parentNode.scrollLeft=elLeft-elParentLeft；
}否则如果（elLeft你试过什么代码？@trippincat为什么？然后检查scrollTo的功能，并复制它。太好了，但是链接页面不见了。@MatthewSchinckel谢谢你指出，我用当前链接更新了答案^t工作，但如果你把2放在它的后面，它会转到第一个：/最后我找到了一个真正工作的！谢谢@Matyashy向左滚动？当从1移动到7时，它实际上是向右移动。它正在调整“scrollLeft”属性。因此，如果你将它从300设置到500，那么实际上是
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;
  }
}