CODEWITHSUNDEEP
cssscroll
codernoob8
codernoob8

Reputation: 712

scroll to 50% of a divs scroll bar

Lets say I wanted to scroll to 50% of the div for example if a div overflows I wanna scroll to half the scroll bar so its in the middle. How would I do it?

<div id = "container">
<canvas/>
</div>

<style>
#container {
width: 80vw;
height: 100vh;
overflow: scroll;
}

</style>

Upvotes: 0

Views: 1776

Answers (1)

McRaZick
McRaZick

Reputation: 341

It seems that a similar question has an answer that you are looking for. It is not possible to recreate your desired effect using CSS, but you can achieve it with Javascript or jQuery. See the following question: How to set the scroll position of a div with a div overflowing inside it?

EDIT 02/06/2020:

If you don't want to use JQuery, then how about using plain JavaScript?

<script type="text/javascript">
  elm = document.getElementById('container');
  elm.addEventListener("overflow", scroll());

  function scroll() {
    vertical_shift = elm.scrollHeight / 2;
    elm.scrollTo(0, vertical_shift)
  }
</script>

This method will detect if an overflow exists and will trigger scroll() function, which will then shift the scrollbar halfway down vertically.

However, this method will not work when you make changes to the #container context. For that, I would also apply an Event Listener for context change.

Upvotes: 1

Related Questions