Question

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

当我在一个contenteditable div上设置一个高度时，溢出会强制前一行文本向上 - 向下滚动div容器并向上滚动内容。我需要保留现有内容，并将内容隐藏起来。

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

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

目标是用户可以键入div并按Enter键以换行新行，但是应该隐藏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 自己的帖子：

<块引用>

我们打算在 v81 中发布 CSS overflow:clip，这是标准化的我们已经使用的前缀值 (-moz-hidden-unscrollable) 的版本船。前缀值成为新值的别名。标准化值大多是兼容的，但也有一些差异。最值得注意的是，我们现在支持单轴裁剪并在另一个中溢出（即“剪辑”可以与 'visible' 在溢出-x/y 属性中）。

参考文献：

对于ContentEditable，跨浏览器溢出moz-hidden-unscrollable

2 个答案: