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

Question

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

我曾希望有一个纯粹的 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 来完成。我得到的解决方案就是这个，但我不知道这是否是你要找的，因为你的问题没有提供太多信息。我做了以下更改在您的 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%;`
}

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2022-02-25 20:28:09

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2022-02-25 20:28:09

解决方案1
1 已采纳 2022-02-25 20:28:09