javascript - 每当我更改其值时如何阻止文本区域滚动到顶部

标签 javascript firefox textarea

我正在制作一些东西,其中文本区域会附加越来越多的文本。在 firefox 中,文本区域每次都向上滚动到顶部。 我目前有类似 textarea.scrollTop=1000000; 的内容,可以在每次更改时将其向下滚动,但它仍然会在很短的时间内上升到顶部。 有什么办法可以阻止它这样做吗?

最佳答案

我也遇到了这个问题。它发生在 IE 和 Firefox 中,但不会发生在 Opera 和 Chrome 中。

我想通过对文本区域进行“double-buffering”更改来隐藏瞬间跳转到顶部:

  1. 创建两个具有完全相同属性和尺寸的文本区域。其中只有一个是可见的;另一个是隐藏的。
  2. 将文本追加到隐藏文本区域:将[隐藏文本区域的值]设置为[可见文本区域的值] + [要追加的文本]。 (文本区域会自动滚动到顶部,但是这个文本区域是隐藏的!)
  3. 将隐藏的文本区域滚动到底部:将 scrollTop 设置为一个高整数值,例如 (-1 >>> 1)。
  4. 将隐藏文本区域与可见文本区域交换。现在显示新文本,没有跳到顶部!

您可以使用以下两种方法之一来交换隐藏/可见文本区域:

  1. 使用绝对定位将文本区域与toggling their visible property 一起放置在彼此之上.
  2. 交换实际的 DOM 元素。我不确定这是否会引入一种新型的“闪烁”。您可能必须创建一个 div 来包含可见的文本区域,这样页面的布局就不会不断变化...

关于javascript - 每当我更改其值时如何阻止文本区域滚动到顶部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3202791/

相关文章:

javascript - Firefox 扩展中的 __defineGetter__ 未定义

html - CSS "clip"的 Safari 渲染错误

jquery - text-overflow :ellipsis css property not working in firefox, stackoverflow 上的上一个解决方案也不起作用

javascript - 如何更改标题的背景图像?

javascript - 如何将textarea多行文本保存到Cloud Firestore?

javascript - TextArea 返回错误值

java - TextArea 中的文本居中

javascript - Chart.js 是否可以在单击图表上的点时触发 javascript?

javascript - 在路由器中动态安装引擎

javascript - 简单 <tr> 单击 强制包含 <a> 单击