跨浏览器溢出 moz-hidden-unscrollable for ContentEditable

Question

有没有办法在跨浏览器（IE 9+，现代浏览器）时尚中实现溢出：-moz-hidden-unscrollable？

当我在 contenteditable div 上设置高度时，溢出迫使前面的文本行向上滚动 - 向下滚动 div 容器并向上滚动内容。我需要保留现有内容并隐藏下面的内容。

-moz-hidden-unscrollable 是我想要的效果，但它不适用于所有现代浏览器 + IE 9。

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

目标是用户可以输入 div 并按回车换行，但应该隐藏 Y 溢出并且 div 不会滚动。

http://jsfiddle.net/cyown5g1/

Answer 1

我用一个可能的解决方案更新了你的 JSFiddle。它为 scroll 事件添加一个事件处理程序，并在每次触发事件时重置 y 偏移量（在本例中，创建了一个新行）。

jQuery:

var formerY = 0;

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

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

Answer 2

2021 年更新：

溢出的新值 clip 正在被所有主流浏览器采用，它们基本上会做与 -moz-hidden-unscrollable

相同的事情

来自 mozilla 自己的 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).

参考文献：

跨浏览器溢出 moz-hidden-unscrollable for ContentEditable

Cross Browser Overflow moz-hidden-unscrollable for ContentEditable

html

css

jquery

contenteditable