Disable scroll only by JS

Question

I have two divs but when I hide scrollbar on one it will be bugged on both, so I need to have overflow visible in CSS. But just disable scrolling with js. Specifically for div with id chatcontent.

Answer 1

You can specify the overflow styling for an element by id 'chatcontent', via the following javascript:

// Disables the overflow behaviour for chatcontent
function disableOverflowForChatcontent() {
    document.getElementById('chatcontent').style.overflow = 'hidden';
}

// Resets the overflow behaviour for chatcontent
function resetOverflowForChatcontent() {
    document.getElementById('chatcontent').style.overflow = '';
}

Ideally, you would have CSS classes defined through which you would control overflow behaviour. Supposing you had the following CSS, then your javascript would be better written as:

CSS:

.overflow-none {
   overflow:hidden;
}

JS:

// Disables the overflow behaviour for chatcontent
function disableOverflowForChatcontent() {
    document.getElementById('chatcontent').classList.add('overflow-none');
}

// Resets the overflow behaviour for chatcontent
function resetOverflowForChatcontent() {
    document.getElementById('chatcontent').classList.remove('overflow-none');
}