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

115
February 20, 2022, at 9:40 PM

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?

Answer 1

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

Answer 2

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.

Rent Charter Buses Company
READ ALSO
How do I change the font style of text displayed on hover with CSS?

How do I change the font style of text displayed on hover with CSS?

I feel like this should be an easy one but nothing I'm doing seems to be workingI may be targeting the element wrong or may be inputting the wrong CSS - I'm fairly new to the coding side of things so any help would be appreciated

113
Images not showing up in Github

Images not showing up in Github

I'm trying to upload my website in GitHub but the images won't showI've tried a lot of the solutions posted here (changing path, changing png to PNG

114
Different scroll speeds for elements in array

Different scroll speeds for elements in array

I have different randomly-styled stars in an array and I would like them to each have different scroll speeds between -2 and -

194
Centering a table header

Centering a table header

I'm having issues centering a single table headerBelow is the tablea snapshot of the table Im trying to center Its header

130