javascript - How to scroll within an overflow hidden div to a certain currently invisible element? -


i have list of elements within overflow hidden div. not elements visible. now, if element gets activated, should become visible within div.

how scroll active element using jquery?

it's merely convenience last element has active class. toggled dynamically.

 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>

the element should become visible:

var scrolltoel = $("div.element.active"); 

you can set scrolltop of wrapper div top of position of active element.

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

demo


Comments

Popular posts from this blog

c# - SVN Error : "svnadmin: E205000: Too many arguments" -

c# - Copy ObservableCollection to another ObservableCollection -

All overlapping substrings matching a java regex -