search

DominikSerafin / vuebar

(🗃️ Archived) Vue 2 directive for custom scrollbar that uses native scroll behavior. Lightweight, performant, customizable and without dependencies. Used successfully in production on https://ggather.com
https://github.serafin.io/vuebar/
MIT License
649 stars 77 forks source link

How can i autoscroll div with v-bar to some selected element? #65

Closed alexdpts closed 5 years ago

alexdpts commented 5 years ago

Markup, for example:


<div style="width:100%;height:100px;" v-bar>
   <div>
    <ul>
        <li><span>One</span></li>
        <li><span>Two</span>
              <ul>
                  <li><span>Two One</span></li>
                  <li><span>Two Two</span></li>
                  ....
                  <li><span>Two N</span></li>
              </ul>
        </li>
        ...
        <li><span class="selected">N</span>
        ...
    </ul>
  </div>
</div>

How can i scroll div content to element with class="selected"?
DominikSerafin commented 5 years ago

Hey @alexdpts, Vuebar doesn't interfere with native scroll events. So you can just use native JS DOM scrolling events & methods.

In case of Vuebar - the inner wrapper element is a 'scrollable' element (child of element with v-bar directive), so you can ref it and then e.g. use scrollTop: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop

alexdpts commented 5 years ago

Ok. Thanks