17

I have a list of elements within a overflow hidden div. So not all elements are visible. Now, if an element gets activated, it should become visible within the div.

How do I scroll to the active element using jQuery?

It's merely a convenience that the last element has the active class. It will be 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 that should become visible:

var scrollToEl = $("div.element.active");
k0pernikus
  • 60,309
  • 67
  • 216
  • 347

3 Answers3

24

You can set the scrollTop of the wrapper div to be the top of the position of the active element.

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

DEMO

sachleen
  • 30,730
  • 8
  • 78
  • 73
  • 3
    Tried your demo but it only works once, try repeating it and you'll see some strange behaviour. This seems to be fixed by the following code: $("#wrapper").scrollTop($("#wrapper").scrollTop() + $("div.element.active").position().top); DEMO: http://jsfiddle.net/pA2Qh/ – Rob Jan 10 '14 at 16:06
  • Good catch, @Rob! That happens because when it scrolls to the active div, it's `position.top` becomes 0. Next time you try to run that code, it'll scroll to position 0, the actual top of the container. Updated my code. – sachleen Jan 10 '14 at 20:50
  • @Rob, this is great. This is the best solution for cases which have `parent: 100% height`, and/or `overflow: hidden` - which is like always, in case of mobile devices – KingJulian Sep 13 '15 at 22:13
16

Maybe you are looking for scrollIntoView method.

scrollToEl[0].scrollIntoView();

DEMO: http://jsfiddle.net/yuFk5/14/

VisioN
  • 143,310
  • 32
  • 282
  • 281
  • It seems to have a few downsides: http://stackoverflow.com/a/9446004/457268 Esp. the "simply jumps to a particular element that may as well be at the end of the page" is a deal breaker for me. – k0pernikus Jul 02 '12 at 22:48
  • @k0pernikus You'd better annotate in the question that you are looking for animated solution. Otherwise, the method works perfectly fine and simple, IMO. – VisioN Jul 02 '12 at 22:51
  • I meant no disrespect to the solution you provided. It just does not fit my needs :) – k0pernikus Jul 02 '12 at 23:00
  • @k0pernikus Well, that makes sense. At least now you know about yet another method :) – VisioN Jul 02 '12 at 23:04
  • I'm using this to simulate normal behavior of a html combo box in ExtJS. – jacoviza May 06 '14 at 17:49
  • Don't miss the note at the top of that page: "This is an experimental technology" – Emil Stenström Mar 04 '15 at 14:31
  • @EmilStenström Yeah, but it remains experimental from release of IE6 and still works well in all browsers I tried it with. As an example, there is no caution about using [`getBoundingClientRect`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect) method but it still behaves differently in some mobile browsers. – VisioN Mar 04 '15 at 14:47
0

You can use this: $("ul li a.active").get(0).scrollIntoView();

Sabawoon Khan
  • 1
  • 1