Html Question posted in
Some basic documentation can be found here.

Html – Full screen videos/images with "scrollbar-gutter: stable both-edges"

I set "scrollbar-gutter: stable both-edges" for my website for a symmetric look but I need to display a video that covers the whole screen width including the space on the left created by "both-edges" – the scrollbar itself on the right is fine (this will be a sort of landing page but with content below it). This is demonstrated in the code snippet at the bottom.

It shows the picture with the extra space on the left. What I wanted to do was remove that extra space from the picture/video but keep it for the rest of the content below ("Blah blah" etc). This would have meant that the content would have been centred relative to the whole screen and not the screen-width with scrollbar-width subtracted.

:root{
    scrollbar-gutter: stable both-edges;
}
body{

    margin: 0;
    width: 100%;
    height: 10000px;

}


img{
    width:100%;
}

div{
    width: 100%;
    margin: auto;
    text-align: center;
    padding-top: 40px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <title>    Test</title>


</head>

<body>


<img src="https://i.sstatic.net/523tYgHO.jpg" alt="kjasak"/>

<div>
    <h1>Blah blah</h1>
    <p>Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah</p>
    
</div>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    It turns out that whatever would be the best way to do this it would have actually made the website look worse - very skewed. It was a bad question of course. But at least I learned that, as it seems, all of the internet centres all the content relative to the space left after subtracting the scrollbar and relative not to the whole screen itself and it all looks fine.


  2. 0

    I don’t know if I understand the question, but this pop into mind. A script that calculates the scrollbar width. Does it help you further? The scrollbar width is set on the body or the element that contains the scrolling area.

    (() => {
  let scroller = (document.scrollingElement || document.body);

  // Force scrollbars to display
  scroller.style.setProperty('overflow', 'scroll');

  // Wait for next from so scrollbars appear
  requestAnimationFrame(()=>{
    
    // True width of the viewport, minus scrollbars
    scroller.style
      .setProperty(
        '--vw', 
        scroller.clientWidth
      );

    // Width of the scrollbar
    scroller.style
      .setProperty(
        '--scrollbar-width', 
        `${window.innerWidth - scroller.clientWidth}px`
      );

    // Reset overflow
    scroller.style
      .setProperty(
        'overflow', 
        ''
      );
  });
})();
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search