0

I'm adding a Chatango HTML5 chat box to my website, but when users scroll up or down in the chat box, it also scrolls up or down the rest of the page. I've been experimenting with different codes I've found on this site, but so far nothing has worked.

I thought I found a solution here: How to disable scrolling in outer elements? and applied it to my chatroom. It works exactly how I want it to on this codepen editor: http://codepen.io/EagleJow/pen/QbOBJV

But using the same code in JSFiddle: https://jsfiddle.net/4bm6ou90/1/ (or on my actual website) does not prevent the rest of the page from scrolling. I've tested it in both Firefox and Chrome with the same results.

Here's the 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();
})

Any ideas?

Community
  • 1
  • 1
Eagle Jow
  • 37
  • 1
  • 8
  • Why have you positioned it absolute. Change its position to `position: fixed` and it will not scroll with the page. – rashidkhan Jun 24 '15 at 22:56
  • I'd like the chat to remain in it's position on the page. Besides, if the chat is in a fixed position, it still looks odd if you're trying to scroll through the chatroom history and the rest of the page is moving up or down behind it. – Eagle Jow Jun 25 '15 at 01:04

1 Answers1

0

It didn't work on JSFiddle because I didn't have jQuery set on the side menu and it didn't work on my website because the '$' symbol in the javascript conflicted with that same symbol in the jQuery (or something like that).

Here's the JSFiddle with better code and set to load jQuery: https://jsfiddle.net/4bm6ou90/7/

The Javascript:

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

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

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

Also gotta have that jQuery CDN in the html head section.

Eagle Jow
  • 37
  • 1
  • 8