Scroll Background Image Horizontally While Scrolling Down Page Vertically-CodePudding

I see multiple attempts at this on Stack Overflow, but nothing that covers my use case. I have an enormously wide image the client wants to have scroll horizontally in the browser background while the rest of the page scrolls down vertically, revealing new content as the page is scrolled further down. I can get the non-background content of the page to scroll horizontally with the background, but I need the content to scroll in the normal, vertical, top-to-bottom manner.

I had hoped that there would be a pure CSS solution for this and I suspect there is one, but as mentioned all I've been able to pull off is horizontal scroll for both the background and content:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <style type="text/css">
      body {
        margin: 0;
        padding: 0;
      }
      .slide {
        width: 100vw;
        height: 100vh;
      }
      .wrapper {
        display: flex;
        flex-direction: row;
        width: 400vw;
        transform: rotate(90deg) translateY(-100vh);
        transform-origin: top left;
      }
      .one {
        background: url("bkg3.png");
        background-size: auto 100vh;
        background-repeat: repeat-x;
        width: 400vw;
      }
      .outer-wrapper {
        width: 100vh;
        height: 100vw;
        transform: rotate(-90deg) translateX(-100vh);
        transform-origin: top left;
        overflow-y: scroll;
        overflow-x: hidden;
        position: absolute;
        scrollbar-width: none;
        -ms-overflow-style: none;
      }
      ::-webkit-scrollbar {
        display:none;
      }
    </style>
  </head>
  <body>
    <div >
      <div >
        <div >
          <div><p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p></div>
          &nbsp;
          <div><p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p></div>
          &nbsp;
          <div><p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p></div>
          &nbsp;
        </div>
      </div>
    </div>
  </body>
</html>

I'd be satisfied with a Javascript/jQuery hybrid solution here, as well. Thanks for any guidance you can provide me.

CodePudding user response：

I believe this can only be done with javascript. The solution i got would be this, but I dont't know if this is what you were looking for, since your question doesn't provide much information.I've made the following changes in your HTML and CSS and added a javascript.

HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div >
      <div >
        <div><p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p></div>
        &nbsp;
        <div><p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p></div>
        &nbsp;
        <div><p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p></div>
        &nbsp;
      </div>
      <div ></div>
    </div>

CSS:

body {
  margin: 0;
  padding: 0;
}
.wrapper {
  padding: 10px;
  min-height: 400vh;
  transform-origin: top left;
}
.slide {
  z-index: 2;
}
.background {
  z-index: -2;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: url("bkg3.png");
  background-repeat: repeat-x;
  background-size: 400vw 100%;
}

Javascript:

const backgroundElement = document.querySelector('.background')

window.onscroll = (e) => {
  const minScroll = window.innerHeight
  const maxScroll = document.body.clientHeight - minScroll

  const determinePercentage = (scroll) => {
    return Math.floor((actualScroll * 100) / maxScroll)
  }

  const actualScroll = Math.floor(window.scrollY)
  const actualPercentage = determinePercentage(actualScroll)


  backgroundElement.style.cssText = `background-position: ${actualPercentage}% 50%;`
}