How to position horizontal scroll bar at center of DIV

Question

I was trying to position horizontal scroll bar at the center of that div. I tired with window.scrollTo() but this works for page scroll and not for div scroll.

Answer 1

Might be usefull with some comments for better understanding, my approach:

function scrollMeTo($Parent, $Child) {

    let parentHalf = $Parent.width() / 2; // half of parent width
    let childHalf = $Child.width() / 2; //half of child width
    let childPos = $Child.position().left; // X pos of child (relative to screen)
    //We increase X with the center of the child (childHalf) - scrolling here we see the right half of the child;
    //We decrease X with the parentHalf to obtain perfect center;
    let scroll = childPos + childHalf - parentHalf; //how much we need to scroll to the element
    //We now add the needed scroll to the current scroll.
    let nextScroll = $Parent.scrollLeft() + scroll;
    $Parent.scrollLeft(nextScroll);
}

Or use as one linear:

function scrollMeTo($Parent,$Child){
       $Parent.scrollLeft($Parent.scrollLeft() + $Child.position().left + $Child.width() / 2 - $Parent.width() / 2);
}

Answer 2

The following will give you your desired effect and scroll to the center of the div through a simple change in your jQuery:

$(document).ready(function(){
    var outerContent = $('.abc');
    var innerContent = $('.abc > div');

    outerContent.scrollLeft((innerContent.width() - outerContent.width()) / 2);        
});

This code will set the scroll bar to the center of the inner content. But lets examine why. We know the minimum value for scrollLeft is zero, and the maximum is inner.width() - outer.width(). So, half way is easily half the maximum.

There is plenty more information on the subject here.

Demo

Answer 3

If you wanted to scroll so that middle div is visible, just set scrollPosition like this:

var scrollPosition = $('.page').width()*2; // scroll by 2 pages, so third page is visible.

http://jsfiddle.net/cxkmkb0o/3/

Otherwise if you want that middle page to be also centered within the view, you should add an offset to what I suggested.

EDIT: also you should notice that the pages in your fiddle don't have the same width as the "view". You should change the width of the page to min-width to be sure they take the correct width. Plus you should take into account borders when you position elements; each side border increases the width of the element. Here's the updated fiddle

Answer 4

This is an old question, but you can now use scrollIntoView for this, depending on the browsers that must be supported:

$(document).ready(function(){ document.getElementById('center').scrollIntoView({ inline: 'center' }); });

Updated fiddle

Answer 5

You can simplay achive this by,

$(document).ready(()=>{
    $('#scroll').scrollIntoView({ inline: 'center' });
});

OR

$(document).ready(()=> {
    let outerContent = $('.abc');
    let innerContent = $('.abc > div');
    outerContent.scrollLeft((innerContent.width() - outerContent.width()) / 2);        
});

Answer 6

$(document).ready(function(){
    var scrollPosition = ($('#viewContainer').width()/2 + $('.abc').width())/2;
    $('.abc').scrollLeft(scrollPosition);

});