如何使用 CSS 网格实现 4 向、移动友好的滚动视图？答案

【问题标题】：How to achieve a 4 directional, mobile-friendly, scroll view with CSS grid?如何使用 CSS 网格实现 4 向、移动友好的滚动视图？
【发布时间】：2020-10-22 00:41:17
【问题描述】：

想象一下 CSS Grid 中的一个英雄区域 (div1)，其 100vh 占据了整个屏幕。 4 个按钮，每个按钮都将用户平滑地滚动到一个 div，根据单击的按钮改变方向。

▲向上：div2

▼下：div3

◄ 左：div4

► 右：div5

一旦用户点击了一个按钮......它会让用户再次点击 HOME/#index.html 并且视图会向内平滑滚动，方向取决于它来自哪个 div。 div2 向下滚动，div4 向右滚动。

一旦您进入一个 div，它应该感觉就像在一个普通页面上，没有视图或滚动到其他 div 的能力，但可以在 div 内部滚动。

也许我想多了……也许这最好使用一些 javascript 滑块脚本来实现？

最优雅的 CSS Grid 解决方案是什么？定向平滑滚动？使用 VueJ 的奖励积分！

狠狠地啜饮着他的咖啡

:root {
  --radius: 5px;
  --padding: 10px;
}

.container {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  color: white;
  text-transform: uppercase;
  font-size: 12px;
  text-align: center;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-gap: 0.5rem;
  height: 100vh;
  grid-template-areas:
    "    .        content1       .     "
    " content4    hero-area   content2 "
    "    .        content3       .     "
  ;
}

#hero-area {
  background: #c9268d;
  border-radius: var(--radius);
  padding-top: var(--padding);
  grid-area: 2 / 2 / 3 / 3;
  display: grid;
  grid-template-columns: repeat(3, 10px);
  grid-template-rows: minmax(50px, 80px) 60px;
  grid-gap: .2rem;
  justify-content: center;
  align-content:center;
}

#content1 {
  background: #d81b60;
  border-radius: var(--radius);
  padding-top: var(--padding);
  grid-area: 1 / 2 / 2 / 3;
}

#content2 {
  background: #b31077;
  border-radius: var(--radius);
  padding-top: var(--padding);
  grid-area: 2 / 3 / 3 / 4;
}

#content3 {
  background: #c51162;
  border-radius: var(--radius);
  padding-top: var(--padding);
  grid-area: 3 / 2 / 4 / 3;
}
#content4 {
  background: #bf1179;
  border-radius: var(--radius);
  padding-top: var(--padding);
  grid-area: 2 / 1 / 3 / 2;
}

<head>
  <link href="https://fonts.googleapis.com/css?family=Inter:400,800,900&display=swap" rel="stylesheet">
</head>

<div class="container">
  <div id="hero-area">Hero-area</div>
  <div id="content1">Content 1</div>
  <div id="content2">Content 2</div>
  <div id="content3">Content 3</div>
  <div id="content4">Content 4</div>
</div>

【问题讨论】：

我得出的结论是，让内容 div (1,2,3,4) 在英雄区域前面平滑滚动可能更容易，因为它相反，创建视口移动的错觉？我仍在寻找有关如何进行此设计的想法。

标签： html css vue.js css-grid

【解决方案1】：

抱歉，我没有完整的答案，但我想使用 css scroll-snap 为您提供一些灵感，然后我建议使用 JS 告诉按钮滚动到每个相应的 div。

    html {
      scroll-snap-type: y mandatory;
    }

    body {
      margin: 0;
    }

    .container {
      display: grid;
      grid-template-rows: repeat(3, 1fr);
      grid-template-columns: repeat(3, 1fr);

      scroll-snap-type: x mandatory;
    }

    .container > div {
      width: 100vw;
      height: 100vh;

      scroll-snap-align: start;
    }

    #hero-area {
      grid-row: 2 / 3;
      grid-column: 2 / 3;

      background-color: gray;
    }

    #content1 {
      grid-column: 2 / 3;

      background-color: #123456;
    }

    #content2 {
      grid-column: 3 / 4;
      grid-row: 2 / 3;

      background-color: #234567;
    }

    #content3 {
      grid-column: 2 / 3;
      grid-row: 3 / 4;

      background-color: #345678;
    }

    #content4 {
      grid-column: 1 / 2;
      grid-row: 2 / 3;

      background-color: #456789;
    }

<div class="container">
  <div id="hero-area">Hero-area</div>
  <div id="content1">Content 1</div>
  <div id="content2">Content 2</div>
  <div id="content3">Content 3</div>
  <div id="content4">Content 4</div>
</div>

编辑：我只在 Firefox 中测试过。

https://caniuse.com/#feat=mdn-css_properties_scroll-snap-stop.

【讨论】：

看起来很有前途。我将如何通过鼠标阻止来阻止滚动？白色（非 div）角不应该是可访问的。我可能已经完全想多了......你认为有可能以某种方式只加载英雄区域，然后根据单击的按钮逐渐加载其余的 div 吗？谢谢你。
我认为其他的一切都必须用 JS 来完成。您最好对我要说的内容非常挑剔，因为我充其量是 JS 中的绝对新手，但我会在滚动时添加一个均匀的侦听器，然后检查滚动位置以确定我是否在不允许的区域中。逐渐加载是什么意思？是否可以仅隐藏其他区域并仅从主要区域开始并在单击时展开（显示）其他 div？
嗨，在没有无线网络的无人区 :) 我可以接受那些无法进入这些角落的人。我正在考虑如何实现这种布局......您是否可以通过让其他页面有方向地滑入和滑出来创造运动的错觉。