垂直向下滾動頁面時水平滾動背景圖像

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