div 怎样才能，#scroll-content https://jsfiddle.net/blehmanade/x1k3rhj7/33/，可以从页面上的任何位置滚动吗？
现在，#scroll-content仅当鼠标位于其上方时才可滚动；但是，当鼠标位于 div 上时#viz-container, the #scroll-contentdiv 不可滚动。因此，目标是当用户尝试垂直滚动时，无论鼠标在页面上的位置如何，div#scroll-content应该滚动。
请注意以下事项：
- 答案应该包括CSS Grid 的使用。
- 答案可以包括 d3.v4
- 答案不应该使用 jQuery（如建议的那样）answer0 https://stackoverflow.com/questions/14262458/scroll-a-div-when-scroll-the-page)
- 答案不应使用插件（如建议的那样）answer1 https://stackoverflow.com/questions/25402766/scroll-a-div-from-everywhere and in answer2 https://stackoverflow.com/questions/4950185/jquery-scroll-a-divoverflowauto-with-a-div).
Using .scrollTop如中提到的answer3 https://stackoverflow.com/questions/10750851/isnt-a-possible-to-scroll-a-div-without-using-jquery-or-other-libraries可能会有所帮助，但此解决方案并未解决此处提出的问题。每当垂直滚动事件触发时，我们需要在特定的 div 上创建滚动事件（与垂直滚动事件期间的鼠标位置无关）。我们想知道 div 如何，#scroll-content https://jsfiddle.net/blehmanade/x1k3rhj7/33/，可以从页面上的任何位置滚动吗？
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>
鉴于两人的选择<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但您可以使用其他值，使滚动更平滑。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
