在 div 上滚动而不触发 angular 中的整页滚动

Question

I have a website which have one page scroll feature using this - https://alvarotrigo.com/angular-fullpage/ Now in this website, In one page I want to create a division inside which the fullpage scroll feature is disabled and I can scroll that division as normal - like this https://stackblitz.com/edit/angular-kqvraz?file=src%2Fapp%2Fapp.component.html

What I have done till now -

app.component.html

<app-navbar></app-navbar>
<div fullpage id="fullpage2" [options]="config" (ref)="getRef($event)">
    <div class="section" id="banner">
        //first section
    </div>
    <div class="section" id="demos">
        //second section
    </div>
    <div class="section" id="prod-solution">
       // third section   
     </div>
    <div class="section" id="scroll-solution">

        <div style="height: 200px; border: 1px solid; overflow: auto;">
        // div where I want to disable full page scroll and enable normal scroll
            <div>
                Please scroll
                <div style="height: 1000px; width: 1000px;"></div>
            </div>
        </div>
    </div>
</div>

app.component.ts

export class AppComponent {
  config: any;
  fullpage_api: any;

  constructor() {

    // for more details on config options please visit fullPage.js docs
    this.config = {

      // fullpage options
      licenseKey: 'YOUR LICENSE KEY HERE',
      anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
      menu: '#menu',

      // fullpage callbacks
      afterResize: () => {
        console.log("After resize");
      },
      afterLoad: (origin, destination, direction) => {
        console.log(origin.index);
      }
    };
  }

  getRef(fullPageRef) {
    this.fullpage_api = fullPageRef;
  }

}

Answer 1

For scrolling on pages higher than 100vh, We want scrolling to be done normally and when we get to the bottom of the page, do a full scroll. For this purpose, you can use the fullpage.js package, which requires a license. But by typescript, it can be easily implemented.

sample in stackblitz

in file.html use (mousewheel):

<div class="container" id="main-container" 
(mousewheel)="changeMouseWheel($event)">
    <div class="panel" id="el1"></div>
    <div class="panel" id="el2"></div>
    <div class="panel" id="el3"></div>
    <div class="panel" id="el4"></div>
    <div class="panel" id="el5"></div>
    <div class="panel" id="el6">
      <h1>whit long height</h1>
    </div>
</div>

in fil.css:

.panel{
  width: 100%;
  height: 100vh;
}
#el1 {background-color: antiquewhite}
#el2 {background-color: aliceblue}
#el3 {background-color: beige}
#el4 {background-color: aqua}
#el5 {background-color: #00ffae
}
#el6 {height: 200vh; background-color: #6200ff
}

in file.ts:

  changeMouseWheel(e) {
    const sectionCount = document.querySelectorAll('.panel').length;
    const windowHeight = window.innerHeight;
    if (e.deltaY < 0 && this.sectionNumber > 1) {
      if (this.hold === false) {
        this.hold = true;
        this.sectionNumber -= 1;
        const element = document.getElementById(`el${this.sectionNumber}`);
        this.scroll(element.offsetTop, 0);
        setTimeout(() => {
          this.hold = false;
        }, 500);
        e.preventDefault();
      }
    }
    if (e.deltaY > 0 && this.sectionNumber < sectionCount) {
      const currentElement = document.getElementById(`el${this.sectionNumber}`);
      if (((currentElement.offsetTop + currentElement.offsetHeight) - windowHeight) <= document.documentElement.scrollTop) {
        if (this.hold === false) {
          this.hold = true;
          this.sectionNumber += 1;
          console.log(`#el${this.sectionNumber}`);
          const nextElement = document.getElementById(`el${this.sectionNumber}`);
          this.scroll(nextElement.offsetTop, 0);
          setTimeout(() => {
            this.hold = false;
          }, 500);
          e.preventDefault();
        }
      }
    }
  }


  scroll(topData: number, leftData: number) {
    window.scrollTo({
      top: topData,
      left: leftData,
      behavior: 'smooth'
    });
  }

Answer 2

You should catch the wheel event on the DIV that shouldn't trigger the fullpage scroll and only scroll this element.

Code

Modify the section of your code to match the following one:

<div style="height: 200px; border: 1px solid; overflow: auto;">
    <!-- add a scroll event listener -->
    <div (wheel)="blockScroll($event)">
        Please scroll
        <div style="height: 1000px; width: 1000px;"></div>
    </div>
</div>

Add the event listener in your app.component.ts :

blockScroll(e) {
  let delta = e.deltaY || -e.detail;
  e.currentTarget.scrollTop += delta * 30;
  e.stopPropagation();
  e.preventDefault();
}

Demo

I added a scrolling container in "Section 2" that will only scroll its own content without triggering the fullpage scroll.

Demo on StackBlitz

If you want other scroll events like touch to be handled as well you need to add the relevant event to the <div> as well.