Javascript 溢出时，相同的元素具有不同的滚动高度。原因是什么？我如何修复它？

我有一个插件，可以创建一个

，并每隔一段时间用

的内容填充一个

。该插件将

定位在

下方，并设置元素样式，使其“框”完全相同。此外，将

的背景和文本定义为

透明

，以便可以看到

的内容

理想情况下，元素及其内容将始终相互镜像。而且在大多数情况下，他们是这样做的。但是，当两个元素都可滚动时，动态中断；这是由于两个元素的

滚动高度

不同（

的

滚动高度

大于

）

代码如下：

var$shadowParagraphObj=$（“#shadowparaphy”）；
var$contentTextAreaObj=$（“#contentTextArea”）。滚动（滚动段落）；
功能段（事件）
{
var textAreaScrollLeft=$contentTextAreaObj.scrollLeft（）；
var textAreaScrollTop=$contentTextAreaObj.scrollTop（）；
如果（$shadowParagraphObj.scrollLeft（）！=textAreaScrollLeft）
$shadowParagraphObj.scrollLeft（文本区域scrollLeft）
如果（$shadowParagraphObj.scrollTop（）！=textAreaScrollTop）
$shadowParagraphObj.scrollTop（文本区域scrollTop）
}
var intervalId=setInterval（函数（）{$shadowParagraphObj.html（$contentTextAreaObj.val（））}，100）
#containerDiv{
位置：相对位置；
左：50%；
左边距：-250px；
宽度：510px；
高度：200px；
}
#阴影段落，#内容文本区域{
宽度：继承；
身高：继承；
溢出：滚动！重要；
填充：4px；
边界：无；
大纲：无；
边际：0px；
空白：预包装；
单词包装：预包装；
字体：1em Arial，无衬线；
}
#影子段落{
位置：绝对位置；
z指数：0；
背景：白色；
颜色：蓝色；
}
#contentTextArea{
位置：相对位置；
z指数：1；
背景：透明；
}


好的，因此使用
.replace（/\n\r？g，
）
转换更新的值，换行符将转换为html换行符。此外，html倾向于忽略单独的

换行符，因此您需要向该值添加额外的

，以确保呈现最后一个换行符

把这些放在一起，看起来像：

var textAreaHTML = $myTextArea.val().replace(/\n\r?g, '<br />')+'<br />';

var textAreaHTML=$myTextArea.val（）.replace（/\n\r？g，
'）+'
'；

此外，我建议您在
.keyup（）
事件、
.keypress（）
事件或使用
.on（'keyup keypress'，function（）{…}）
更新文本区域值和滚动位置

要查看此操作，请在问题中包含代码。在输入字符之前，似乎无法获取换行符的高度。。。调查atm@GrantMooney你听说过吗？@Gothdo:jsFiddle链接代替了代码，因为这是一个涉及Javascript、HTML和CSS的问题，使网站成为展示问题的最有效方式。您提供的链接没有说明在问题中包含代码是强制性的，因此您的否决票和要求关闭此问题可能被视为滥用了上述设施。@Kevin，我正在通过使用
.replace（/\n\r？/g，
）接近解决方案
在检索到的值上，将换行符转换为html换行符。请看这很好，但我需要能够检测文本区域中的所有变化，而不仅仅是键盘笔划的结果。例如，通过上下文菜单粘贴文本时不会触发任何事件；处理这种变化的唯一方法（据我所知）是使用区间函数，你可能想看看