Cross-browser Overflow moz-hidden-unscrollable for ContentEditable
Is there a way to achieve overflow: -moz-hidden-unscrollable in cross-browser mode (IE 9+, modern browsers)?
When I set the height on the contenteditable div, the overflow forces the previous lines of text to be dragged in - the container div scrolls down and content up. I need the existing content to stay and the content to hide below.
-moz-hidden-unscrollable is the effect I'm using, but it doesn't work in all modern browsers + IE 9.
div {
height:14px;
font-size:14px;
line-height:14px;
overflow:hidden;
}
The goal is that the user can type in a div and hit enter for a new line, but the Y overflow should be hidden and the div doesn't scroll.
source to share
I have updated your JSFiddle with a possible solution. It adds an event handler for the event scroll
and resets the y offset every time the event is fired (in this case, a new line is created).
JQuery
var formerY = 0;
$("div").on("scroll", function(e){
$(e.target).scrollTop(formerY);
});
JSFiddle: https://jsfiddle.net/cyown5g1/1/
source to share