Javascript 在div上滚动而不触发全页滚动

我有一个网站，其中有一个页面滚动功能使用此- 现在在这个网站上，我想在一个页面中创建一个分区，在该分区中，全页滚动功能被禁用，我可以像正常情况一样滚动该分区-如下所示

我到现在为止所做的-

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>

您应该捕获DIV上的wheel事件，该事件不应触发整页滚动，而只滚动该元素

密码 修改代码的部分以匹配以下部分：

<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>

演示

我在第2节中添加了一个滚动容器，它只会滚动自己的内容，而不会触发全页滚动

---

如果您想同时处理其他滚动事件（如触摸），则还需要将相关事件添加到中。

您能告诉我StopperProgation和preventDefault的功能吗？我是新来的this@AbhishekPatel太好了，对你有用！关于您的问题：多个元素可以侦听相同的事件，并附加事件侦听器。现在，如果一个事件发生，它将冒泡，这意味着事件将被一个接一个地触发，从最里面的元素一直到它的父元素，直到它到达最外面的元素。e、 停止传播；将中断此链并阻止事件到达下一个元素。e、 防止违约；将停止浏览器执行默认操作，即滚动页面。@AbhishekPatel是一个关于事件冒泡的示例指南，是关于MDN的默认设置的简短说明。

<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>

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