CODEWITHSUNDEEP
jqueryhtmlcssscroll
Nemanja Grabovac
Nemanja Grabovac

Reputation: 878

Fix an element until everything inside is scrolled

I asked this question before but I couldn't formulate it well, but this is what I would like to achieve. When scrolling a single page website, all the sections are 100% height. When I get to one section that has content to scroll down, I want to disable scrolling the entire web page until the content of that section is fully scrolled down. Example in this fiddle: 

div {
  height: 100vh;
}

.blue {
  background: blue;
}

.red {
  background: red;
}

.white {
  background: white;
}

.black {
  background: black;
}

div.content-wrapper {
  overflow: auto;
  width: 40%;
}
<div class="red">

</div>
<div class="blue">

</div>
<div class=white>
  <div class="content-wrapper">
    <div class="content">
      Test TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest
      TestTest TestTest TestTest TestTest TestTest Test
    </div>
    <div class="content">
      Test TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest
      TestTest TestTest TestTest TestTest TestTest Test
    </div>
    <div class="content">
      Test TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest
      TestTest TestTest TestTest TestTest TestTest Test
    </div>
  </div>
</div>
<div class="black">

</div>

When we get to white section, it should be fixed and we should listen to scroll event and just somehow translate or scroll elements inside ( test test divs ), when we come to the end - allow scrolling to the black section.

Anyone had similar problem? I don't know how to do it, therefor I cannot provide the code I tried. Im working in AngularJS.

Upvotes: 0

Views: 98

Answers (2)

Zoedia
Zoedia

Reputation: 465

Have you found the solution? If not, try this.

$('.white').on('mousewheel DOMMouseScroll', function(e) {
  var e0 = e.originalEvent,
    delta = e0.wheelDelta || -e0.detail;

  var scrolled = $(".content-wrapper").scrollTop() + (delta < 0 ? 1 : -1) * 20;
  if (!($(".content-wrapper").scrollTop() == 0 && scrolled < 0) && //check if hit top and still scrolling above
      !($(".content-wrapper")[0].scrollHeight - $(".content-wrapper").scrollTop() <= $(".content-wrapper").outerHeight() &&
        scrolled + $(".content-wrapper").outerHeight() > $(".content-wrapper")[0].scrollHeight) //check if scrollbar hit the .white scroll bottom and still scrolling below
     ) {
    $(".content-wrapper").scrollTop(scrolled);
    e.preventDefault();
  }
});

Upvotes: 1

vic
vic

Reputation: 132

You can try:

$( '.scrollable' ).on( 'mousewheel DOMMouseScroll', function ( e ) {
    var e0 = e.originalEvent,
        delta = e0.wheelDelta || -e0.detail;

    this.scrollTop += ( delta < 0 ? 1 : -1 ) * 40;
    e.preventDefault();
});

Demo: https://jsbin.com/howojuq/edit?js,output

or refer : How to prevent page scrolling when scrolling a DIV element?

Upvotes: 1

Related Questions