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.
1
-
1Please include your code.user7148391– user71483912018-10-25 20:30:29 +00:00Commented Oct 25, 2018 at 20:30
Add a comment
|
1 Answer
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');
}
9 Comments
Scott Marcus
Rather than setting/creating inline styles, it's best to dynamically add/remove a pre-existing CSS class with
.classList.add() or .classList.remove().
Dacre Denny
@ScottMarcus yes I agree, use of pre-existing classes is preferred. Hoping the answer works within possible constraints that the OP is working in. I've just updated the answer though to capture your suggestion - thanks for the feedback :-)
WebCoder
But I want to have overflow: scroll; Only disabled by js
Dacre Denny
@WebCoder just updated answer to use
hidden - does this work for you?WebCoder
@DacreDenny when i hide overflow it get bugged.
|