Question

我有一个可满足的元素，应该以相对较小的宽度开始，然后当你将内容放入其中时，它会扩展，直到它达到最大宽度，剪切内容。

我希望＆＃34;向后滚动＆＃34;一开始很像文本框。我已经尝试将插入位置设置为开头，它确实有效，但不会向后滚动＆＃34;。 我还尝试将内容设置为空（＆＃34;＆＃34;），然后在1ms后回到setTimeout的帮助，尽管这是非常脏的解决方案：（

我无法使用文本框，因为我只想在双击后才能编辑内容。有人可以帮忙吗？

HTML：

<section contenteditable='true'>Edit me!</section>

CSS：

section {
    background-color:#ccc;
    display:inline;
    white-space:nowrap;
    max-width:100px;
    position:absolute;
    overflow:hidden;
    padding:10px;
}

Example

Answer 1

您可以使用.scrollLeft设置溢出的滚动位置。我正在使用＆＃39; onblur＆＃39;当该部分不再是焦点时，您的部分属性会触发，它会传递this以使我们的函数使用而不是稍后获取该元素：

<section contenteditable='true' onblur="resetOverflowPosition(this)">This should be long enough to mean that you can scroll forward and the script will scroll backwards</section>

这里我们将scrollLeft设置为0以重置该部分的当前滚动，您可以多次使用此功能：

function resetOverflowPosition(element){
    element.scrollLeft = 0;
}

这是一个JSFiddle：https://jsfiddle.net/np72zxo0/2/。如果您需要更多帮助，请不要犹豫。

＆＃34;向后滚动＆＃34;在不满足（模糊）的满足元素？

1 个答案: