How Can I Get The Overflow Scroll Position To Start In The Middle?

Issue

I'm really trying to get the overflow-x scrollbar scroll position to start in the middle instead of to to the left:

Currently, it always starts at the left side:

Is this possible to do?

Solution

Hard to tell what you're doing currently without seeing some code, but it sounds like you need to dynamically set the position of the scrollbar based on the page width when it's initially loaded. In Vue, try wrapping your content in a div container and setting the scrollLeft property of the element in your mounted() function.

Here's a codepen of what that logic might look like:

Snippet

Link: CodePen

document.addEventListener('DOMContentLoaded', function () {
  const scrollContainer = document.getElementById('scroll-container');
  const content = document.getElementById('content');
  
  const middlePosition = (content.offsetWidth - scrollContainer.clientWidth) / 2;
 
  scrollContainer.scrollLeft = middlePosition;
});

#scroll-container {
  width: 300px;
  overflow-x: auto;
}

#content {
  white-space: nowrap;
  display: inline-block;
  width: 600px;
}

<div class="scroll-container" id="scroll-container">
  <div class="content" id="content">
  </div>
</div>

Answered By - brett_0267