光标超过 Div 时禁用页面滚动 (Chatango)答案

【问题标题】：Disabling Page Scroll when Cursor is Over Div (Chatango)光标超过 Div 时禁用页面滚动 (Chatango)
【发布时间】：2015-06-24 22:50:06
【问题描述】：

我正在向我的网站添加一个 Chatango HTML5 聊天框，但是当用户在聊天框中向上或向下滚动时，它也会向上或向下滚动页面的其余部分。我一直在试验我在这个网站上找到的不同代码，但到目前为止没有任何效果。

我以为我在这里找到了解决方案：How to disable scrolling in outer elements? 并将其应用于我的聊天室。它在这个 codepen 编辑器上完全符合我的要求：http://codepen.io/EagleJow/pen/QbOBJV

但在 JSFiddle 中使用相同的代码：https://jsfiddle.net/4bm6ou90/1/（或在我的实际网站上）不会阻止页面的其余部分滚动。我已经在 Firefox 和 Chrome 中进行了测试，结果相同。

这里是javascript：

var panel =  $(".panel");
var doc = $(document);
var currentScroll;
function resetScroll(){
    doc.scrollTop(currentScroll);
  }
function stopDocScroll(){
  currentScroll = doc.scrollTop();
  doc.on('scroll', resetScroll);
}
function releaseDocScroll(){
  doc.off('scroll', resetScroll);
}

panel.on('mouseenter', function(){
  stopDocScroll();
})
panel.on('mouseleave', function(){
  releaseDocScroll();
})

有什么想法吗？

【问题讨论】：

你为什么把它定位为绝对。将其位置更改为position: fixed，它不会随页面滚动。
我希望聊天保持在页面上的位置。此外，如果聊天处于固定位置，如果您尝试滚动聊天室历史记录并且页面的其余部分在其后面向上或向下移动，它仍然看起来很奇怪。

标签： html scroll

【解决方案1】：

它在 JSFiddle 上不起作用，因为我没有在侧边菜单上设置 jQuery，并且它在我的网站上不起作用，因为 javascript 中的“$”符号与 jQuery 中的相同符号（或类似的东西）。

这是具有更好代码并设置为加载 jQuery 的 JSFiddle：https://jsfiddle.net/4bm6ou90/7/

Javascript：

$.noConflict();
jQuery( document ).ready(function( $ ) {

  $(".panel").on("mouseenter", function(){
    $(document).on("scroll", function(){
       $(this).scrollTop(0); 
    });
});

$(".panel").on("mouseleave", function(){
    $(document).off("scroll");
});
});

html head 部分中还必须有那个 jQuery CDN。

【讨论】：