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

Question

有没有一种跨浏览器（IE 9+，现代浏览器）的方法来实现overflow：-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/

- User970008

---

这会让我们几乎无法知道元素内部实际包含了什么，不是吗？除非以一种可怕的方式箭头移动？ - Alex McMillan

应用程序通过显示警告来处理溢出。这不是问题。问题在于上面的内容。 - User970008

Answer 1

我已经更新了您的JSFiddle，并提供了一种可能的解决方案。它为scroll事件添加了一个事件处理程序，并在每次事件被触发时重置y偏移量（在本例中，是新行）。

jQuery：

var formerY = 0;

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

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

- mattsven

---

为了更高的特异性，是的。但在这种情况下只有一个 div，OP 可以轻松地进行调整。出于简单示例的目的，我认为这很好。真正担心的是如果 OP 在生产代码中使用类似这样的通用、非特定选择器（而不是类、ID 等）。 - mattsven

我只是说了“应该”，而不是说“必须这样做，否则你的代码就是垃圾！” 这两者之间的区别很大。但是你的代码能够工作，这才是最重要的。但是，如果你想要一个带有样式检查的完整实现，你需要像这样使用伪代码：$("[contenteditable]").( "scroll", function(){ if( this.style.overflow == 'hidden'){ this.scrollTop(0); } } );。 - Ismael Miguel

是的，div选择器只是为了简单起见。 - User970008

@IsmaelMiguel 这些都是语义问题，而且它假设了很多我们不知道的海报的愿望和意图。你怎么知道他想要针对所有contentEditable divs，甚至只有那些带有overflow: hidden的divs？（顺便说一下，你的示例只涉及内联CSS）我的答案旨在为海报提供一个概念的跳板和示例。如果不知道他想做什么，我们猜测最好的代码是毫无意义的...？ - mattsven

那只是伪代码。看，我并不是说你错了。我只是给你展示了一种部分解决问题的方法。如果那是个问题的话。 - Ismael Miguel

Answer 2

2021年更新：

所有主流浏览器都采用了新的overflow值clip，它基本上会做与-moz-hidden-unscrollable相同的事情。

来自Mozilla的帖子：

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

参考资料：

• https://drafts.csswg.org/css-overflow-3/#valdef-overflow-clip
• https://groups.google.com/g/mozilla.dev.platform/c/7oQm8PC0aU0?pli=1
• https://chromestatus.com/feature/5638444178997248

- Dogoku

---

正在被采用 - dube