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.

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;

}

    <html>
    <head>
      <script>
        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

      </script>
    </head>

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

        </div>
      </div>
    </body>
    </html>

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

458
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

Auto center horizontal scrollbar

1 Answers1