Menu
How can the div, #scroll-content, be scrollable from anywhere on the page?
Currently, #scroll-content is scrollable only when the mouse is positioned over it; however, when the mouse is positioned on the div #viz-container, the #scroll-content div is not scrollable. So the goal is that when the user tries to scroll vertically independent of where the mouse is located on the page, the div #scroll-content should scroll.
Note the following:
Using .scrollTop as mentioned in answer3 might be helpful, but this solution doesn't address the question asked here. We need to create a scroll event on a specific div whenever a vertical scroll event fires (independent of the mouse location during the vertical scroll event). We want to know how the div, #scroll-content, can be scrollable from anywhere on the page?
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>
290
Given the selections with the two <divs> you have...
var viz = d3.select("#viz-container");
var scroll = d3.select("#scroll-content");
... probably the simplest solution is just setting the scrollTop of the target (the left hand one) based on an event in the source (the right hand one). This the whole code:
viz.on("wheel", function() {
scroll.property("scrollTop", +scroll.property("scrollTop") + d3.event.deltaY)
});
Here is your code with that change only (click "full page"):
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: I'm using deltaY but you can use another value, making the scroll smoother.
188
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
