Auto center horizontal scrollbar

Question

I've found some related cases but no answer works for me. My page have a big horizontal image but I need to start scrolling it from the middle (just horizontally), always and in any resolution.

var body = document.body; // For Safari
var html = document.documentElement; // Chrome, Firefox, IE and Opera 
body.scrollLeft = (html.clientWidth - body.scrollWidth) / 2
html.scrollLeft = (html.clientWidth - body.scrollWidth) / 2

body {
  background-color: 0178fa;
  padding: 0;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: auto;
}

#page {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 0;
  display: block;
}

#wrap-landing {
  position: relative;
  margin: 0 auto;
  padding: 0;
  content: url(https://i.imgur.com/gb6EyHk.png);
  width: 1920px;
  height: 1080px;
}

<div id="page">
  <div id="wrap-landing"></div>
</div>

Remember to remove half of the width and height of the screen from the scroll left and top positions. — evolutionxbox, Jul 27 '20 at 22:23
That is happening in body.scrollLeft = (html.clientWidth-body.scrollWidth) / 2 html.scrollLeft = (html.clientWidth-body.scrollWidth) / 2 isn't? — holoman, Jul 27 '20 at 22:43
I don't think `html.clientWidth` is correct. Take a look here https://ryanve.com/lab/dimensions/ --- Edit: I'm not reading things properly — evolutionxbox, Jul 27 '20 at 22:46

ewertoncodes · Accepted Answer · 2020-07-28T02:16:44.300

1

You could use standard javascript: window.scroll(x, y).

Ex:

window.addEventListener('load', function() {
  setTimeout(function() {
    window.scroll(x, y);
  },1)
})

x-coord is the pixel along the horizontal axis of the document that you want displayed in the upper left.

y-coord is the pixel along the vertical axis of the document that you want displayed in the upper left.

window.addEventListener('load', function() {
  setTimeout(function() {
    window.scroll(screen.width/2, 0);
  },1)
})

body{
    background-color:0178fa;
  padding:0;
  text-align:center;
    display: flex;
  justify-content: center;
  align-items: center;
    overflow:auto;
}

#page {
    width:100%;
    height:100%;
    margin:0 auto;
  padding:0;
    display:block;
}


#wrap-landing{
    position:relative;
    margin:0 auto;
  padding:0;
    content:url(https://i.imgur.com/gb6EyHk.png);
    width:1920px;
    height:1080px;

}

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
  <div id="page">
    <div id="wrap-landing">
    </div>
  </div>
</body>
</html>

edited Jul 28 '20 at 02:16

answered Jul 27 '20 at 22:32

ewertoncodes

468
3
11

This won't do anything, scroll stuck in the 0 position at the left (I changed it to 0,500 but no luck). Using Chrome. Really strange. Also I would need to calculate the center of the viewport. – holoman Jul 27 '20 at 22:43
If you run the code snippet you see the bottom scroll going to the middle? --I don't know what's happening, this should work (but isn't) – holoman Jul 27 '20 at 23:38
1

I neeed put setTImeout https://stackoverflow.com/questions/15691569/javascript-issue-with-scrollto-in-chrome – ewertoncodes Jul 28 '20 at 01:34
Thanks, this works* --the calculation is weird, though, and the scroll bar goes all the way to the right end- – holoman Jul 28 '20 at 02:05
1

Great! now just change to the value you think is best :) – ewertoncodes Jul 28 '20 at 02:16
this won't work in mobile browsers (JS limitation?) – holoman Aug 05 '20 at 21:10

Roko C. Buljan · Answer 2 · 2022-10-15T16:35:58.053

The math would be:

centerX = (el.scrollWidth - el.clientWidth) / 2

Example on a scrollable #page Element:

const el = (sel, par) => (par || document).querySelector(sel);

const elPage = el("#page");
const centerX = (elPage.scrollWidth - elPage.clientWidth) / 2;
const centerY = (elPage.scrollHeight - elPage.clientHeight) / 2;
elPage.scrollTo(centerX, centerY);

#page {
  display: flex;
  overflow: scroll; 
  height: 200px;
}

#image {
  flex: 0 0 auto;
  margin: auto;
  content: url(https://i.imgur.com/gb6EyHk.png);
  width: 1920px;
  height: 1080px;
}

/*
PS: flex and margin:auto is used to center 
#image in case is smaller than the parent.
*/

<div id="page">
  <div id="image"></div>
</div>

Auto center horizontal scrollbar

2 Answers2

Linked