垂直向下滚动页面时水平滚动背景图像

Question

我在 Stack Overflow 上看到了多次尝试，但没有涵盖我的用例。我有一个非常宽的图像，客户希望在浏览器背景中水平滚动，而页面的其余部分垂直向下滚动，随着页面进一步向下滚动显示新内容。我可以让页面的非背景内容随背景水平滚动，但我需要内容以正常、垂直、从上到下的方式滚动。

我曾希望有一个纯粹的 CSS 解决方案，我怀疑有一个，但正如我所提到的，我所能实现的只是背景和内容的水平滚动:

<!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 class="outer-wrapper">
      <div class="wrapper">
        <div class="slide one">
          <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>

我对这里的 Javascript/jQuery 混合解决方案也很满意。感谢您提供给我的任何指导。

Answer 1

我相信只有 javascript 才能做到这一点。我得到的解决方案是这样的，但我不知道这是否是您要找的，因为您的问题没有提供太多 information.I已在您的 HTML 和CSS 并添加了一个 javascript.

HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div class="wrapper">
      <div class="slide">
        <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 class="background"></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%;`
}

垂直向下滚动页面时水平滚动背景图像

Scroll Background Image Horizontally While Scrolling Down Page Vertically

javascript

css

jquery

horizontal-scrolling

vertical-scrolling