17

オーバーフロー隠しdiv内の要素のリストがあります。したがって、すべての要素が表示されるわけではありません。これで、要素がアクティブ化されると、div内に表示されるようになります。

jQueryを使用してアクティブな要素にスクロールするにはどうすればよいですか？

最後の要素にアクティブクラスがあるのは単に便利です。動的に切り替えられます。

 var scrollToEl = $("div.element.active");
 console.log(zoomToEl);
 #main,
 #sidebar {
   height: 200px;
 }
 #wrapper {
   width: 190px;
   float: left;
   background: grey;
   overflow: auto;
   overflow-x: hidden;
 }
 #sidebar div.element {
   height: 150px;
   width: 150px;
   background-color: green;
   margin-bottom: 10px;
 }
 #sidebar div.element.active {
   background-color: red;
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
  <div id="wrapper" class="sidebar">
    <div id="sidebar">
      <div class="element" data-slide-id="0">a
      </div>
      <div class="element" data-slide-id="1">b
      </div>
      <div class="element" data-slide-id="2">c
      </div>
      <div class="element" data-slide-id="3">d
      </div>
      <div class="element" data-slide-id="4">e
      </div>
      <div class="element" data-slide-id="5">f
      </div>
      <div class="element" data-slide-id="6">g
      </div>
      <div class="element active" data-slide-id="7">h
      </div>
    </div>
  </div>
</div>

表示されるはずの要素：

var scrollToEl = $("div.element.active");
4

2 に答える 2

24

scrollTopラッパーdivのをtopアクティブposition要素ののに設定できます。

$("#wrapper").scrollTop($("#wrapper").scrollTop() + $("div.element.active").position().top);

デモ

于 2012-07-02T22:13:05.343 に答える
16

多分あなたは方法を探していますscrollIntoView。

scrollToEl[0].scrollIntoView();

デモ：http： //jsfiddle.net/yuFk5/14/

于 2012-07-02T22:11:27.403 に答える