使用 CSS Grid，从任何地方滚动一个 div（不使用 jQuery 插件）答案

【问题标题】：Using CSS Grid, scroll a div from anywhere (w/out using jQuery plugins)使用 CSS Grid，从任何地方滚动一个 div（不使用 jQuery 插件）
【发布时间】：2018-03-18 11:53:54
【问题描述】：

如何让 div #scroll-content 可以从页面上的任何位置滚动？

目前，#scroll-content 只有当鼠标放在它上面时才能滚动；但是，当鼠标位于 div #viz-container 上时，#scroll-content div 不可滚动。所以目标是当用户尝试垂直滚动时，与鼠标在页面上的位置无关，div #scroll-content 应该滚动。

注意以下几点：

答案应包括 CSS Grid 的使用。
答案可以包括 d3.v4
答案不应使用 jQuery（如 answer0 中所建议的那样）
answer 不应使用插件（如 answer1 和 answer2 中所建议的那样）。

使用answer3 中提到的.scrollTop 可能会有所帮助，但此解决方案并未解决此处提出的问题。每当触发垂直滚动事件时（与垂直滚动事件期间的鼠标位置无关），我们都需要在特定 div 上创建滚动事件。我们想知道 div #scroll-content 是如何从页面上的任何位置滚动的？

body, html {
  height: 100%;
  box-sizing: border-box;
  overflow:hidden; /* stops scroll from the entire page */
  background-color: #ad6364;
}
#wrapper {
  display: grid;
  height:100%;
  grid-template-columns: 25% repeat(10,7%) 5%;
  grid-template-rows: 5% repeat(4,15%) 30% 5%;
  grid-template-areas:
    "nav nav nav nav nav nav nav nav nav nav nav nav"
    "side1 side1 viz1 viz1 viz1 viz1 viz1 viz1 viz1 viz1 viz1 side2"
    "side1 side1 viz1 viz1 viz1 viz1 viz1 viz1 viz1 viz1 viz1 side2"
    "side1 side1 viz1 viz1 viz1 viz1 viz1 viz1 viz1 viz1 viz1 side2"
    "side1 side1 viz1 viz1 viz1 viz1 viz1 viz1 viz1 viz1 viz1 side2"
    "int   int  int  int  int  int  int  int  int  int  int  int"
    "ftr   ftr  ftr  ftr  ftr  ftr  ftr  ftr  ftr  ftr  ftr  ftr";
  grid-gap:1px; 
}

#scroll-content {
  display:block;
  grid-column: 1/3;
  grid-row: 2 / 6;
  /*background-color:#ad6364;*/
  /*opacity: 0.75;*/
  overflow: auto;
  background-color:#2B3033;
}
.step{
  margin-bottom: 200px;
  overflow: auto;
  max-height: 100vh;
  position: relative;
  fill:#bdbdc1;
}

#viz-container{
  background-color:#2B3033;
  grid-area: viz1;
}
#nav-bar{
  grid-area:nav;
  background-color:#767678;
}
#side-bar1{
  grid-area:side1;
  background-color:#767678;
}
#side-bar2{
  grid-area:side2;
  background-color:#767678;
}
#footer{
  grid-area:ftr;
  background-color:#767678;
}
#interaction{
  grid-area:int;
  background-color:#767678;
}
.general-text{
  text-align: center;
  vertical-align: middle;
  color:#bdbdc1;
  font-size:10px;
}

<html>
  <head>
    <meta charset="utf-8">
    <script src="https://d3js.org/d3.v4.min.js"></script>
  </head>
  <body>
    <div id="wrapper">
      <div id="nav-bar" class="general-text">nav</div>
      <div id="scroll-content" class="general-text">
        <section class="step">Question: how do we make this div #scroll-content scrollable from anywhere on the page? <br><br>Notice that if we place the mouse over this div, it's currently scrollable; however, if place the mouse over viz, then this div can not be scrolled. <br><br>...scroll down.
        </section>
        <section class="step">Note: none of the div positions are fixed b/c we're using CSS Grid.
         </section>
         <section class="step">...the end.
         </section>
      </div>
      <div id="viz-container" class="general-text">viz</div>
      <div id="interaction" class="general-text">interaction</div>
      <div id="side-bar1"></div>
      <div id="side-bar2"></div>
      <div id="footer">footer</div>
    </div>
  </body>
</html>

【问题讨论】：

我写了一个非常简单的 D3 答案，我刚刚删除了它，因为我意识到你想要一个 CSS 网格 答案。在这种情况下，包含 D3 标记对我来说毫无意义。
CSS 网格基本上与问题无关。滚动行为在网格、flex 和 oldschool 布局中是相同的。
@GerardoFurtado 如果你有一个简单的 D3 答案，请取消删除它——除了在 vanilla 中重新实现 jquery 'mousewheel' 插件，捕捉这些事件之外，我想不出任何方法来做到这一点并使用它们手动设置内容 div 的 scrollTop。（这将是合理可行的排序；插件所做的只是将'wheel'、'mousewheel'、'DOMMouseScroll'和'MozMousePixelScroll'事件协调到一个处理程序中......）
@blehman 好吧，这就是我所做的：我为源 div 设置了一个 D3 事件侦听器，它更改了目标 div 的 scrollTop。我看到这不是你的解决方案。让我们看看其他人是否可以在这里提供帮助。
@GerardoFurtado - 使用 D3js 和 CSS Grid 看起来很简单，但让我们看看你的代码。我明确提到可以使用 D3js；我很想看看你的工作示例。

标签： javascript css d3.js scroll

【解决方案1】：

鉴于您有两个<divs> 的选择...

var viz = d3.select("#viz-container");
var scroll = d3.select("#scroll-content");

... 可能最简单的解决方案只是根据源（右手）中的事件设置目标（左手）的scrollTop。这是整个代码：

viz.on("wheel", function() {
    scroll.property("scrollTop", +scroll.property("scrollTop") + d3.event.deltaY)
});

这是您的代码，仅进行了更改（点击“整页”）：

var viz = d3.select("#viz-container");
var scroll = d3.select("#scroll-content");
viz.on("wheel", function() {
  scroll.property("scrollTop", +scroll.property("scrollTop") + d3.event.deltaY)
});

body, html {
  height: 100%;
  box-sizing: border-box;
  overflow:hidden; /* stops scroll from the entire page */
  background-color: #ad6364;
}
#wrapper {
  display: grid;
  height:100%;
  grid-template-columns: 25% repeat(10,7%) 5%;
  grid-template-rows: 5% repeat(4,15%) 30% 5%;
  grid-template-areas:
    "nav nav nav nav nav nav nav nav nav nav nav nav"
    "side1 side1 viz1 viz1 viz1 viz1 viz1 viz1 viz1 viz1 viz1 side2"
    "side1 side1 viz1 viz1 viz1 viz1 viz1 viz1 viz1 viz1 viz1 side2"
    "side1 side1 viz1 viz1 viz1 viz1 viz1 viz1 viz1 viz1 viz1 side2"
    "side1 side1 viz1 viz1 viz1 viz1 viz1 viz1 viz1 viz1 viz1 side2"
    "int   int  int  int  int  int  int  int  int  int  int  int"
    "ftr   ftr  ftr  ftr  ftr  ftr  ftr  ftr  ftr  ftr  ftr  ftr";
  grid-gap:1px; 
}

#scroll-content {
  display:block;
  grid-column: 1/3;
  grid-row: 2 / 6;
  /*background-color:#ad6364;*/
  /*opacity: 0.75;*/
  overflow: auto;
  background-color:#2B3033;
}
.step{
  margin-bottom: 200px;
  overflow: auto;
  max-height: 100vh;
  position: relative;
  fill:#bdbdc1;
}

#viz-container{
  background-color:#2B3033;
  grid-area: viz1;
}
#nav-bar{
  grid-area:nav;
  background-color:#767678;
}
#side-bar1{
  grid-area:side1;
  background-color:#767678;
}
#side-bar2{
  grid-area:side2;
  background-color:#767678;
}
#footer{
  grid-area:ftr;
  background-color:#767678;
}
#interaction{
  grid-area:int;
  background-color:#767678;
}
.general-text{
  text-align: center;
  vertical-align: middle;
  color:#bdbdc1;
  font-size:10px;
}

<html>
  <head>
    <meta charset="utf-8">
    <script src="https://d3js.org/d3.v4.min.js"></script>
  </head>
  <body>
    <div id="wrapper">
      <div id="nav-bar" class="general-text">nav</div>
      <div id="scroll-content" class="general-text">
        <section class="step">Question: how do we make this div #scroll-content scrollable from anywhere on the page? <br><br>Notice that if we place the mouse over this div, it's currently scrollable; however, if place the mouse over viz, then this div can not be scrolled. <br><br>...scroll down.
        </section>
        <section class="step">Note: none of the div positions are fixed b/c we're using CSS Grid.
         </section>
         <section class="step">...the end.
         </section>
      </div>
      <div id="viz-container" class="general-text">viz</div>
      <div id="interaction" class="general-text">interaction</div>
      <div id="side-bar1"></div>
      <div id="side-bar2"></div>
      <div id="footer">footer</div>
    </div>
  </body>
</html>

PS：我使用的是deltaY，但你可以使用其他值，使滚动更平滑。

【讨论】：

你希望这个解决方案能在 iPhone 上运行吗？
注意：我为移动设备添加了一个new question。