examples/scrollbar_gutter_example_03.html

<!doctype html>
<meta charset="utf-8">
<title>CSS scrollbar-gutter example 08</title>
<link rel="author" title="Felipe Erias" href="mailto:felipeerias@igalia.com" />

<style>
  body, html {
    margin: 0;
    padding: 0;
  }

  html {
    scrollbar-gutter: stable both-edges;
  }

  img {
    width: 100%;
  }
</style>

<body>
  <img src="https://picsum.photos/500/101" />

  <h1>Lorem Ipsum</h1>

  <hr />

  <p>
    Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium
    doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore
    veritatis et quasi architecto beatae vitae dicta sunt, explicabo.
  </p>

  <p>
    Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut
    fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi
    nesciunt, neque porro quisquam est, qui do lorem ipsum, quia dolor sit amet
    consectetur adipiscing velit, sed quia non numquam do eius modi tempora
    incididunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim
    ad minima veniam, quis nostrumd exercitationem ullam corporis suscipit
    laboriosam, nisi ut aliquid ex ea commodi consequatur?
  </p>

  <img src="https://picsum.photos/500/102" />

  <p>
    Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam
    nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas
    nulla pariatur? At vero eos et accusamus et iusto odio dignissimos
    ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos
    dolores et quas molestias excepturi sint, obcaecati cupiditate non
    provident, similique sunt in culpa, qui officia deserunt mollitia animi, id
    est laborum et dolorum fuga.
  </p>

  <img src="https://picsum.photos/500/103" />

  <p>
    Et harum quidem rerum facilis est et expedita distinctio. Nam libero
    tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo
    minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda
    est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis
    debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae
    sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente
    delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut
    perferendis doloribus asperiores repellat.
  </p>

  <img src="https://picsum.photos/500/104" />

</body>