Using CSS Grid, Scroll A Div From Anywhere (w/out Using JQuery Plugins)

August 13, 2022 Post a Comment

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 mo

Solution 1:

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"):

Baca Juga

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.

JavaScript Free

Using CSS Grid, Scroll A Div From Anywhere (w/out Using JQuery Plugins)

Solution 1:

Post a Comment for "Using CSS Grid, Scroll A Div From Anywhere (w/out Using JQuery Plugins)"