javascript - 锁定父级滚动，仅允许div滚动

我创建了一个弹出div，它会弹出在主页上。它是position:fixed;并带有overflow:scroll;。

问题是，除非用户将鼠标置于该div上，否则触摸鼠标或滚轮上的滚动功能会滚动父窗口-而不是div。触控板也是如此。

有没有一种方法可以锁定父窗口的滚动，并将div设置为通过jQuery的滚动？我发现了很多相反的帖子-人们希望查看div滚动条并使用父级。

任何帮助将不胜感激。

最佳答案

如果要使用jquery，可以通过以下方法在弹出窗口发生时将主体的溢出设置为隐藏，并在弹出窗口消失时撤消该溢出：

CSS：

body.popup-open {
    overflow: hidden;
}

和jQuery的：

$("#popup").on("show", function () {
  $("body").addClass("popup-open");
}).on("hidden", function () {
  $("body").removeClass("popup-open")
});