文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用CSS滚动-快照与Javascript鼠标轮？

问如何使用CSS滚动-快照与Javascript鼠标轮？
EN

Stack Overflow用户

提问于 2022-09-25 12:45:14

回答 1查看 155关注 0票数 1

我有一个简单的网页，它呈现一组横向布局的部分。当用户向x或y方向滚动时，他们将水平滚动各个部分。我用Javascript完成了这个任务。现在，我还想使用CSS scroll-snap来创建更好的用户体验。

我遇到的问题是，当我在节的容器上设置scroll-snap: both madatory时，我失去了水平滚动y方向的能力，就像在我的CSS中添加scroll-snap之前一样。

下面是用于重新映射用户垂直滚动以水平滚动的代码：

const scrollContainer = document.getElementById("scroll_container");

const transformScroll = (e) => {
    if (!e.deltaY) {
      return;
    }
  
    e.currentTarget.scrollLeft += e.deltaY + e.deltaX;
    e.preventDefault();
}

if(scrollContainer) {
   scrollContainer.addEventListener("wheel", transformScroll);
}

我想知道，是否有一种让scroll-snap和x/y水平滚动同时工作的方法？我愿意在这里对我的方法进行彻底的重新设计，所以任何想法或建议都是绝对值得赞赏的。

下面是一个代码，它显示了当前只能滚动快照的工作方式：https://codepen.io/wyzanttutor/pen/xxjPqBK?editors=0010

这是我在这里写的供参考的代码：

这是我的html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Testing Scroll</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="app">
        <header class="header">
            <nav>
                Nav
            </nav>
        </header>
        <main class="main" id="scroll_container">
            <section class="section">
                <div>
                    <h1>Section 1</h1>
                </div>
            </section>
            <section class="section">
                <div>
                    <h1>Section 2</h1>
                </div>
            </section>
            <section class="section">
                <div>
                    <h1>Section 3</h1>
                </div>
            </section>
            <section class="section">
                <div>
                    <h1>Section 4</h1>
                </div>
            </section>
        </main>
    </div>
</body>
</html>

这是我的css

@keyframes sectionEntry {
      from {
        opacity: 0;
      } to {
          opacity: 1;
      }
  }
  
  html {
    font-size: 16px;
  }
  
  body{
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1;
  }

  .app {
    height: 100vh;
  
    display: flex;
    flex-direction: column;
  }
  
  .header {
  
  }
  
  .main {
    min-width: 100vw;
    height: 100%;
  
    display: flex;
    flex-direction: row;
    
    align-items: center;
  
    overflow-x: scroll;
    overflow-y: hidden;

    scroll-snap-type: both mandatory;
  }
  
  .section {
    min-width: 100vw;
    width: 100vw;
    height: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;

    scroll-snap-align: start;

    opacity: 0;
  }
  
  .section:not(:first-child) {
    margin-left: 5rem;
  }
  

  .section-visible {
    animation: sectionEntry 2s ease-in forwards;
  }

这是我的javascript

const transformScroll = (e) => {
    if (!e.deltaY) {
      return;
    }
  
    e.currentTarget.scrollLeft += e.deltaY + e.deltaX;
    e.preventDefault();
}

const handleScrollSection = (el) => {
    el.classList.add("section-visible")
}

const scrollContainer = document.getElementById("scroll_container");
const sectionsEls = document.querySelectorAll(".section");

const setScrollContainerWheel = () => {
    if(scrollContainer) {
        scrollContainer.addEventListener("wheel", transformScroll);
    }
}

const setSectionObservers = () => {
    const observer = new IntersectionObserver((entries) => {
        const entry = entries[0];
        console.log(entry);

        if(entry) {
            handleScrollSection(entry.target);
        }
    })
    
    sectionsEls.forEach((section) => {
        if(section) {
            observer.observe(section);
        }
    })
}

setScrollContainerWheel();
setSectionObservers();

javascript

html

css

scroll

回答 1

Stack Overflow用户

发布于 2022-09-27 14:19:27

为了在x方向上加速，你需要在x轴上有元素。

为了在y方向上加速，你需要在y轴上有元素。

您的.main CSS只为snap元素指定了一个x轴，即flex-direction: row;，所以它们只能朝这个方向，即x。

下面的代码给出了一个例子，非常粗略地设计了一个元素，它被强制放在x轴和y轴的混合上。

当沿着y轴抓取时，按定义，snap会遗漏掉，即“跳过”，x轴上的任何元素。

要想在x和y两个方向上对齐，你需要两个轴上的元素。

.scroll_container {
    overflow: auto;
    scroll-snap-type: both mandatory;
    width: 35vw;
    height: 30vh;
    white-space: nowrap;        /* Set inline elemens to not be wrapped, ie, stay on the x-axis */
}

.section {
    width: 30vw;
    height: 30vh;
    scroll-snap-align: start;
}

/* Contrive some sections to go left to right */

.section:nth-of-type(4n),
.section:nth-of-type(4n+1),
.section:nth-of-type(4n+2) {
    display: inline-block;
}

/* Make sections stand out.*/

.scroll_container > div:nth-of-type(odd).section {
    background: pink;
}

.scroll_container > div:nth-of-type(even).section {
    background: wheat;
}

<div class="scroll_container">
    <div class="section">
        <p>Section 1</p>
    </div>
    <div class="section">
        <p>Section 2</p>
    </div>
    <div class="section">
        <p>Section 3</p>
    </div>
    <div class="section">
        <p>Section 4</p>
    </div>
    <div class="section">
        <p>Section 5</p>
    </div>
    <div class="section">
        <p>Section 6</p>
    </div>
    <div class="section">
        <p>Section 7</p>
    </div>
    <div class="section">
        <p>Section 8</p>
    </div>
    <div class="section">
        <p>Section 9</p>
    </div>
    <div class="section">
        <p>Section 10</p>
    </div>
    <div class="section">
        <p>Section 11</p>
    </div>
    <div class="section">
        <p>Section 12</p>
    </div>
    <div class="section">
        <p>Section 13</p>
    </div>
    <div class="section">
        <p>Section 14</p>
    </div>
    <div class="section">
        <p>Section 15</p>
    </div>
    <div class="section">
        <p>Section 16</p>
    </div>
    <div class="section">
        <p>Section 17</p>
    </div>
    <div class="section">
        <p>Section 18</p>
    </div>
</div>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/73844586

复制

相似问题

问如何使用CSS滚动-快照与Javascript鼠标轮？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用CSS滚动-快照与Javascript鼠标轮？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用CSS滚动-快照与Javascript鼠标轮？
EN