jquery - 如何将列表的事件元素滚动到 View 中？

Question

基本上我喜欢让事件元素始终可见。

此示例中的事件元素具有类 option todo

如果你用 jQuery 点击按钮 scrolltoactive 怎么办？

谢谢你，

亚历克斯

body {
   font-family: Helvetica, Arial, Sans-Serif;
}

ul.variant-scroll{
  position: relative;
  width: 100%;
  height: 55px;
  padding: 0 0 0 20px;
  display: block;
  float: left;
  list-style: none;
  counter-reset: section;
  white-space: nowrap;
  overflow: hidden;
  overflow-x: scroll;
}

ul.variant-scroll li{
  display: inline-block;
  background: #f2f2f2;
  color: #6056c3;
  padding: 0 25px;
  height: 55px;
  line-height: 55px;
  font-size: 1.142em;
  cursor: pointer;
  pointer-events: auto;
  margin: 0 -4px 0 0 !important;
}

ul.variant-scroll li.todo{
  background: #6056c3;
  color: #fff;
  cursor: default;
  pointer-events: none;
}

ul.variant-scroll li.todo a{
  color: #fff;
}

ul.variant-scroll li.notdone.todo,
ul.variant-scroll li.checkout{
  background: #f2f2f2;
  color: #525252 !important;
  cursor: default;
  pointer-events: none;
}

ul.variant-scroll li.notdone.todo a,
ul.variant-scroll li.checkout a{
  color: #525252 !important;
}

ul.variant-scroll li::before {
  counter-increment: section;
  content: counter(section) ". ";
}

<button type="button" class="scrolltoactive">Scroll to active</button>

<ul class="variant-scroll">
<li class="option">option</li>
<li class="option">option</li>
<li class="option">option</li>
<li class="option">option</li>
<li class="option">option</li>
<li class="option">option</li>
<li class="option">option</li>
<li class="option">option</li>
<li class="option">option</li>
<li class="option todo">option</li>
<li class="option notdone todo">option</li>
<li class="option notdone todo">option</li>
<li class="option notdone todo">option</li>
<li class="option notdone todo">option</li>
<li class="option notdone todo">option</li>  
<li class="option notdone todo">option</li>
<li class="option notdone todo">option</li>
<li class="option notdone todo">option</li>
<li class="option notdone todo">option</li>
<li class="option notdone todo">option</li>
<li class="option notdone todo">option</li>
<li class="option notdone todo">option</li>     
</ul>

Answer 1

这是一个有效的 fiddle .

您可以使用属性 scrollLeft()

像这样:$('.variant-scroll').scrollLeft($('.todo').offset().left)

编辑

如果你想让它在点击按钮后工作，只需向你的按钮添加一个事件监听器:

$('.scrolltoactive').on('click',function(){
    $('.variant-scroll').scrollLeft($('.todo').offset().left);
});