CODEWITHSUNDEEP
jqueryhtmlcsscontenteditable
User970008
User970008

Reputation: 1155

Cross Browser Overflow moz-hidden-unscrollable for ContentEditable

Is there a way to achieve overflow: -moz-hidden-unscrollable in a cross browser (IE 9+, modern browsers) fashion?

When I set a height on a contenteditable div, the overflow forces the previous lines of text up -- scrolling the div container down and the content up. I need for the existing content to remain and have the content below hidden.

-moz-hidden-unscrollable is the effect I am going for, but it does not work in all the modern browsers + IE 9.

div {
    height:14px;
    font-size:14px;
    line-height:14px;
    overflow:hidden;
}

The goal is that a user can type in the div and hit enter for a new line, but the Y overflow should be hidden and the div not scroll.

http://jsfiddle.net/cyown5g1/

Upvotes: 4

Views: 2257

Answers (2)

Dogoku
Dogoku

Reputation: 4675

Update for 2021:

The new value for overflow, clip, is being adopted by all major browsers which will essentially do the same thing that -moz-hidden-unscrollable

From mozilla's own post:

We intend to ship CSS overflow:clip in v81, which is the standardized version of a prefixed value (-moz-hidden-unscrollable) that we already ship. The prefixed value becomes an alias for the new value. The standardized value is mostly compatible, but there are some differences. Most notably, we now support clipping in one axis and overflowing in the other (i.e. 'clip' can be combined with 'visible' in the overflow-x/y properties).

References:

Upvotes: 1

mattsven
mattsven

Reputation: 23283

I updated your JSFiddle with a possible solution. It adds an event handler for the scroll event and resets the y offset every time the event is fired (in this case, a new line is made).

jQuery:

var formerY = 0;

$("div").on("scroll", function(e){
    $(e.target).scrollTop(formerY);
});

JSFiddle: https://jsfiddle.net/cyown5g1/1/

Upvotes: 2

Related Questions