對水平滾動的影響

Question

我只使用 CSS 創建了這個水平滾動（由於滾動樣式，只能在 Chrome 上工作）。

 * { -webkit-box-sizing: border-box; box-sizing: border-box; font-family: 'Nunito', sans-serif; } ::-webkit-scrollbar { height: 0; width: 0; } ::-webkit-scrollbar-button { height: 0; width: 0; } h2 { margin: 0; } p { font-size: 1.25em; letter-spacing: 0.56px; line-height: 32px; } .container { background-color: #000; bottom: 0; height: 100vh; left: 0; margin: auto; position: absolute; right: 0; top: 0; width: 100vw; } .horScroll { background-color: #abc; height: 100vw; overflow-x: hidden; overflow-y: auto; position: absolute; -ms-scroll-snap-type: mandatory; scroll-snap-type: mandatory; -ms-scroll-snap-points-y: repeat(100vw); scroll-snap-points-y: repeat(100vw); -ms-scroll-snap-type: y mandatory; scroll-snap-type: y mandatory; -webkit-transform: translateX(-100%) rotate(-90deg); -ms-transform: translateX(-100%) rotate(-90deg); transform: translateX(-100%) rotate(-90deg); -webkit-transform-origin: top right; -ms-transform-origin: top right; transform-origin: top right; width: 100vh; } .item { background-color: #e4e4e4; height: 100vw; position: -webkit-sticky; position: sticky; scroll-snap-align: start; top: 0; width: 100vh; } .horScroll > div:nth-of-type(2n) { background-color: #333; color: #fff; } .item-inner { height: 100vh; max-height: 100vh; overflow: scroll; padding: 40px; -webkit-transform: rotate(90deg) translateX(-100vh); -ms-transform: rotate(90deg) translateX(-100vh); transform: rotate(90deg) translateX(-100vh); -webkit-transform-origin: bottom left; -ms-transform-origin: bottom left; transform-origin: bottom left; width: 100vw; } .item-content { height: 100%; }

 <div class="container"> <div class="horScroll"> <div class="item"> <div class="item-inner"> <div class="item-content"> <h2>Item 1</h2> <div> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad tempora ducimus tenetur facilis magnam assumenda atque? Minus molestiae hic consectetur voluptatibus maxime, a eum laudantium explicabo similique, iure dignissimos quae.</p> </div> </div> </div> </div> <div class="item"> <div class="item-inner"> <div class="item-content"> <h2>Item 2</h2> <div> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad tempora ducimus tenetur facilis magnam assumenda atque? Minus molestiae hic consectetur voluptatibus maxime, a eum laudantium explicabo similique, iure dignissimos quae.</p> </div> </div> </div> </div> <div class="item"> <div class="item-inner"> <div class="item-content"> <h2>Item 3</h2> <div> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad tempora ducimus tenetur facilis magnam assumenda atque? Minus molestiae hic consectetur voluptatibus maxime, a eum laudantium explicabo similique, iure dignissimos quae.</p> </div> </div> </div> </div> <div class="item"> <div class="item-inner"> <div class="item-content"> <h2>Item 4</h2> <div> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad tempora ducimus tenetur facilis magnam assumenda atque? Minus molestiae hic consectetur voluptatibus maxime, a eum laudantium explicabo similique, iure dignissimos quae.</p> </div> </div> </div> </div> <div class="item"> <div class="item-inner"> <div class="item-content"> <h2>Item 5</h2> <div> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad tempora ducimus tenetur facilis magnam assumenda atque? Minus molestiae hic consectetur voluptatibus maxime, a eum laudantium explicabo similique, iure dignissimos quae.</p> </div> </div> </div> </div> <div class="item"> <div class="item-inner"> <div class="item-content"> <h2>Item 6</h2> <div> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad tempora ducimus tenetur facilis magnam assumenda atque? Minus molestiae hic consectetur voluptatibus maxime, a eum laudantium explicabo similique, iure dignissimos quae.</p> </div> </div> </div> </div> </div> </div>

它按預期工作。 現在我正在嘗試在 JavaScript 中創建一個額外的效果。

我希望當下一個項目即將到來時，前一個項目的不透明度、比例或類似效果會發生變化，表明它正在“淡出”。 它是兩個項目之間的過渡效果。 在這種情況下，我正在嘗試不透明度。
在相反的方向會發生相反的情況：消失的項目“淡入”。

在forEach()循環中，我可以識別當前正在滾動的項目（您可以在console.log查看），但現在我沒有正確計算不透明度。 我有幾個因素需要考慮，比如當前項目和當前滾動位置。

var widthBase = window.innerWidth;
window.addEventListener("resize", function() {
  widthBase = window.innerWidth;
})

var items = document.querySelectorAll(".item");

document.querySelector(".horScroll").addEventListener("scroll", function(e) {

  items.forEach(function(item, i) {

    var currentScroll = e.target.scrollTop;

    if (currentScroll >= widthBase * (i) && currentScroll < widthBase * (i + 1)) {
      console.log("item index: " + i + ", scroll position: " + currentScroll);
      // item.querySelector(".item-content").style.opacity = ? // opacity calculation value
    }

  })

})

我試過item.querySelector(".item-content").style.opacity = (widthBase * (i + 1))/currentScroll - 1 ，但它部分工作。 其他一些變體也失敗了。 我錯過了一些東西。

此外，我認為循環遍歷每個卷軸中的所有項目並不具有表演性，但我想不出有什么不同。

Answer 1

我修正了計算。 首先，我必須考慮這一點：

item 的頂部位置等於1 。
item 的底部位置等於0.001 。
因此，當前滾動將是X ，這是我每次滾動所需的值。

1 和 0.001 是opacity 、 transform: scale()或其他值在 0 和 1 之間的屬性。
必須是0.001而不是0，否則計算會失敗。 “最高位置”也不能為 0，所以我總是給它加 1。

.

現在，使用比例而不是不透明度，結果將是：

"scale(" + (1 - (currentScroll-((widthBase * i) + 1))*(1-0.55)/(((widthBase * (i + 1)) + 1)-((widthBase * i) + 1))) + ")";

工作片段：

 var widthBase = window.innerWidth; window.addEventListener("resize", function() { widthBase = window.innerWidth; }) var items = document.querySelectorAll(".item"); document.querySelector(".horScroll").addEventListener("scroll", function(e) { items.forEach(function(item, i) { var currentScroll = e.target.scrollTop; if (currentScroll > widthBase * (i) && currentScroll < widthBase * (i + 1)) { item.querySelector(".item-content").style.transform = "scale(" + (1 - (currentScroll-((widthBase * i) + 1))*(1-0.55)/(((widthBase * (i+1)) + 1)-((widthBase * i) + 1))) + ")"; } }) })

 * { -webkit-box-sizing: border-box; box-sizing: border-box; font-family: 'Nunito', sans-serif; } ::-webkit-scrollbar { height: 0; width: 0; } ::-webkit-scrollbar-button { height: 0; width: 0; } h2 { margin: 0; } p { font-size: 1.25em; letter-spacing: 0.56px; line-height: 32px; } .container { background-color: #000; bottom: 0; height: 100vh; left: 0; margin: auto; position: absolute; right: 0; top: 0; width: 100vw; } .horScroll { background-color: #abc; height: 100vw; overflow-x: hidden; overflow-y: auto; position: absolute; -ms-scroll-snap-type: mandatory; scroll-snap-type: mandatory; -ms-scroll-snap-points-y: repeat(100vw); scroll-snap-points-y: repeat(100vw); -ms-scroll-snap-type: y mandatory; scroll-snap-type: y mandatory; -webkit-transform: translateX(-100%) rotate(-90deg); -ms-transform: translateX(-100%) rotate(-90deg); transform: translateX(-100%) rotate(-90deg); -webkit-transform-origin: top right; -ms-transform-origin: top right; transform-origin: top right; width: 100vh; } .item { background-color: #e4e4e4; height: 100vw; position: -webkit-sticky; position: sticky; scroll-snap-align: start; top: 0; width: 100vh; } .horScroll > div:nth-of-type(2n) { background-color: #333; color: #fff; } .item-inner { height: 100vh; max-height: 100vh; overflow: scroll; padding: 40px; -webkit-transform: rotate(90deg) translateX(-100vh); -ms-transform: rotate(90deg) translateX(-100vh); transform: rotate(90deg) translateX(-100vh); -webkit-transform-origin: bottom left; -ms-transform-origin: bottom left; transform-origin: bottom left; width: 100vw; } .item-content { height: 100%; }

 <div class="container"> <div class="horScroll"> <div class="item"> <div class="item-inner"> <div class="item-content"> <h2>Item 1</h2> <div> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad tempora ducimus tenetur facilis magnam assumenda atque? Minus molestiae hic consectetur voluptatibus maxime, a eum laudantium explicabo similique, iure dignissimos quae.</p> </div> </div> </div> </div> <div class="item"> <div class="item-inner"> <div class="item-content"> <h2>Item 2</h2> <div> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad tempora ducimus tenetur facilis magnam assumenda atque? Minus molestiae hic consectetur voluptatibus maxime, a eum laudantium explicabo similique, iure dignissimos quae.</p> </div> </div> </div> </div> <div class="item"> <div class="item-inner"> <div class="item-content"> <h2>Item 3</h2> <div> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad tempora ducimus tenetur facilis magnam assumenda atque? Minus molestiae hic consectetur voluptatibus maxime, a eum laudantium explicabo similique, iure dignissimos quae.</p> </div> </div> </div> </div> <div class="item"> <div class="item-inner"> <div class="item-content"> <h2>Item 4</h2> <div> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad tempora ducimus tenetur facilis magnam assumenda atque? Minus molestiae hic consectetur voluptatibus maxime, a eum laudantium explicabo similique, iure dignissimos quae.</p> </div> </div> </div> </div> <div class="item"> <div class="item-inner"> <div class="item-content"> <h2>Item 5</h2> <div> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad tempora ducimus tenetur facilis magnam assumenda atque? Minus molestiae hic consectetur voluptatibus maxime, a eum laudantium explicabo similique, iure dignissimos quae.</p> </div> </div> </div> </div> <div class="item"> <div class="item-inner"> <div class="item-content"> <h2>Item 6</h2> <div> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad tempora ducimus tenetur facilis magnam assumenda atque? Minus molestiae hic consectetur voluptatibus maxime, a eum laudantium explicabo similique, iure dignissimos quae.</p> </div> </div> </div> </div> </div> </div>

不幸的是，我沒有改變每個滾動的迭代，這對性能有一點影響。