How to scroll inside an overflowed DIV

Question

I have a div box and there is some text inside (with a lot of

and and even more ). Now if I set some anchors inside of this DIV, the whole page scrolls down to the position, where the hidden anchor actually is. But I want to smoothly scroll inside of the DIV only.

<div id="desc_box" style="width: 290px;">
  <ul class="scrollto">
    <li class="no_list"><a href="#mdb_mi1">Menu Item 01</a></li>
    <li class="no_list"><a href="#mdb_mi2">Menu Item 02</a></li>
    <li class="no_list"><a href="#mdb_mi3">Menu Item 03</a></li>
    <li class="no_list"><a href="#mdb_mi4">Menu Item 04</a></li>
  </ul>

  <h1 id="mdb_mi1">Contents MI-1</h1>

  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>

  <h1 id="mdb_mi2">Contents MI-2</h1>

  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
  
  <h1 id="mdb_mi3">Contents MI-3</h1>

  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>

  <h1 id="mdb_mi4">Contents MI-4</h1>

  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>

How can I achieve this?

Possible duplicate of [How to scroll to an element inside a div?](https://stackoverflow.com/questions/635706/how-to-scroll-to-an-element-inside-a-div) — scagood, Feb 15 '18 at 11:15

score 0 · Answer 1 · edited Feb 15 '18 at 17:08

The page is scrolling because the DIV that contains the content is taller than the viewport. Constraining the height of the DIV (#desc_box) to the height of the viewport via viewport units and appropriately setting the DIV's overflow will prevent the page from scrolling.

Support for using viewport units is good among modern browsers. Viewport units on caniuse.com

Try setting the DIV's height to "100vh" (vh = viewport height) and set the overflow-y to scroll:

<div id="desc_box" style="width: 290px; height: 100vh; overflow-y: scroll;">

How to scroll inside an overflowed DIV

1 Answers1