Is there an easy way to allow an html document to scroll left and right?

user_16792037 0
Viewed 80

I was making a webpage with a spiderweb style design, meaning content would move out and to the left and right as the user browsed.

I want the user to be able to scroll to the left and to the right as they please.

However, I noticed that it's impossible to scroll to the left while using direction:ltr. To fix this, I tried using direction:rtl on html and direction:ltr on the body. However, when I do this, it becomes unable to scroll to the right. There is the option of putting a margin-left: var(--left-content-width,0) modifier on html, but this sacrifices internet explorer 11 compatability, and makes it much harder to keep track of all the content on the left of the viewport. Is there an easy way to scroll left and right (preferably using just css, but javascript is not out of the question), or are we doomed to constant margin updates forever?

scroll css html
2 Answers

You can use this: overflow-x: scroll;. If anything overflows off of the screen the user can scroll to see it.

user_174934310

For the good of people coming across this question, here's the patchwork solution I created in the end.

var button = document.getElementsByTagName("button")[0];
var hiddenStyle = window.getComputedStyle(document.getElementById("hiddenContent"));
var main = document.getElementsByTagName("main")[0];
var mainStyle = window.getComputedStyle(main);
button.onclick = showHidden;

function showHidden() {
  main.style.marginLeft = hiddenStyle.getPropertyValue("right");
  window.scrollBy(parseInt(hiddenStyle.getPropertyValue("right")), 0);
}
div {
  background-color: green;
  width: 30%;
  height: 3em;
  right: 35%;
  left: 35%;
  top: calc(50% - 3em);
  position: absolute;
}

#hiddenContent {
  left: auto;
  right: 300vw;
  /*example, can be anything including calc() values*/
}

main {
  width: 100vw;
  height: 100vw;
  position: absolute;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="example.css">
</head>

<body>
  <main>
    <div id="firstContent">
      check this out- if you press
      <button>
          this button
         </button>, more content will appear
    </div>
    <div id="hiddenContent">
      this content is secret. Of course, there is a way for screen readers to see this but it's not needed in the minimum product
    </div>
  </main>
  <script href="example.js">
  </script>
</body>

</html>

A bit sloppy, but I hope it was a good proof of concept and can help others not take quite as long as I did to solve similar issues.

user_167920370
Related