Scroll specific div without having to hover over it

Question

I have a section which essentially contains an image and some text.

I'm using GSAP to pin the section on scroll and now I'm looking to scroll the text, without making the user hover over it.

Key points:

.configurator is 100vh
When the .configurator is pinned, I want the content in .configurator__options to start scrolling, until it reaches the end, and then unpin.

I don't want to set an overflow: scroll to .configurator__options, because the content will only be scrollable once the user is hovering over that div.

If the users mouse is hovering over anything in .configurator then I want the content in .configurator__options to scroll.

Demo:

$(function() {

  gsap.registerPlugin(ScrollTrigger);

  let container = document.querySelector(".configurator");

  gsap.to(container, {
    ease: "none",
    scrollTrigger: {
      trigger: container,
      markers: true,
      start: "top top",
      end: "+=200%",
      pin: container,
      scrub: 2,
    },
  });

});

.spacer {
  height: 200px;
  background: black;
}

.configurator {
  height: 100vh;
  overflow: hidden;
}
.configurator__header {
  border-top: 1px solid black;
  padding-top: 30px;
}
.configurator__options {
  background: lightblue;
  overflow: hidden;
  height: 600px;
  padding: 0 30px;
}
.configurator__images img {
  width: 100%;
}

.footer {
  height: 1000px;
  background-color: black;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>

<div class="spacer"></div>

<section class="configurator">

 <header class="configurator__header">Header</header>

  <div class="container-fluid px-0">
    <div class="row">

      <div class="col-6">
        <div class="configurator__images">
          <img src="https://picsum.photos/200/300" alt="test"/>
        </div>
      </div>

      <div class="col-6">
        <div class="configurator__options">
          <div class="configurator__options-inner">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </div>
        </div>
      </div>

    </div>
  </div>

</section>

<footer class="footer"></footer>

I haven't seen any questions on SO or the GSAP forums which detail how to make another element scrollable, when hover over another.

Edit

For demo, see below site:

Click here
When your mouse is over the images, start to scroll down
Notice how the text on the right hand side is scrolling down, even through you're hovering over the image

Here is a gif to show the above:

Would wrapping your scroll function into an event handler work for you? window.addEventListener('scroll', function(){ code goes here }, true) — Egil Hansen, Jun 29 '22 at 11:47
What's wrong with `.configurator__options:hover { overflow: scroll; }`? — Swiffy, Jun 29 '22 at 19:05
@EgilHansen - Wrapping my `scrollTrigger` in a `scroll` function didn't do anything (no changes in behaviour) — Freddy, Jun 30 '22 at 07:27
@Swiffy - Because that section will only be scrollable if the user is hovering over the `. configurator__options`. I want to be able to scroll this section, after the section is pinned, even if the users mouse is on `.configurator__images`. For demo, click this URL: https://www.porsche.com/uk/modelstart/all/?modelrange=718 and then click on any vehicle. Then, start to scroll down. You can see how, even though you're on the image, the text is scrolling on the right side — Freddy, Jun 30 '22 at 07:31

score 0 · Answer 1 · answered Jul 03 '22 at 00:25

This might not be very helpful so I apologize in advance. Not sure I follow what the GSAP part is trying to do, why not just have a mouse over event on the image that will scroll the content of the div like so (note when you move the mouse over the image the text (in the div to the left of the image) will scroll and when you hover off the image the text will scroll back again). This works independently of the GSAP so not sure if this is the desired effect you were going for ? Was the aim to have the GSAP scroll the content of the div when the image is in view range?

$(function() {
  var ele = $('#scroll');
  var speed = 25,
    scroll = 5,
    scrolling;
  $('.configurator__images').mouseleave(function() {
    // Scroll the element up
    if (scrolling) {
      window.clearInterval(scrolling);
      scrolling = false;
    }
    scrolling = window.setInterval(function() {
      ele.scrollTop(ele.scrollTop() - scroll);
    }, speed);
  });
  $('.configurator__images').mouseover(function() {
    // Scroll the element down
    if (scrolling) {
      window.clearInterval(scrolling);
      scrolling = false;
    }
    scrolling = window.setInterval(function() {
      ele.scrollTop(ele.scrollTop() + scroll);
    }, speed);
  });
  gsap.registerPlugin(ScrollTrigger);

  let container = document.querySelector(".configurator");

  gsap.to(container, {
    ease: "none",
    scrollTrigger: {
      trigger: container,
      markers: true,
      start: "top top",
      end: "+=200%",
      pin: container,
      scrub: 2,
    },
  });

});

div#scroll {
  width: auto;
  height: 100vh;
  overflow: hidden;
  padding: 4px;
  margin-bottom: 20px;
}

.spacer {
  height: 200px;
  background: black;
}

.configurator {
  height: 100vh;
  overflow: hidden;
}

.configurator__header {
  border-top: 1px solid black;
  padding-top: 30px;
}

.configurator__options {
  background: lightblue;
  overflow: hidden;
  height: 600px;
  padding: 0 30px;
}

.configurator__images img {
  width: 100%;
}

.footer {
  height: 1000px;
  background-color: black;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>

<div class="spacer"></div>

<section class="configurator">

  <header class="configurator__header">Header</header>

  <div class="container-fluid px-0">
    <div class="row">

      <div class="col-6">
        <div class="configurator__images">
          <img src="https://picsum.photos/200/300" alt="test" />
        </div>
      </div>

      <div class="col-6">
        <div class="configurator__options">
          <div id="scroll">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
            in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing
            elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
            esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </div>
        </div>
      </div>

    </div>
  </div>

</section>

<footer class="footer"></footer>

I hope this helps some

Scroll specific div without having to hover over it

1 Answers1