Question

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

我以为我在这里找到了一个解决方案：How to disable scrolling in outer elements?并将其应用到我的聊天室。它在我的编译器编辑器上完全符合我的要求：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();
})

有什么想法吗？

Answer 1

它没有在JSFiddle上工作，因为我没有在侧面菜单上设置jQuery而且它在我的网站上没有工作，因为＆＃39; $＆＃39; javascript中的符号与jQuery中的相同符号（或类似的东西）冲突。

这里的JSFiddle有更好的代码，并设置为加载jQuery：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。

光标超过Div时禁用页面滚动（Chatango）

1 个答案: