如何使用Django Form实现两个表单同步滚动？

要实现两个表单里的textarea同步滚动，核心思路是用JavaScript监听滚动事件，把一个的滚动状态同步给另一个。我给你一步步拆解实现方法：

首先修改你的Django Form定义，给每个textarea加上统一的类名或者唯一ID，这样JavaScript能准确选中它们。比如修改你的SrtForm，同时假设另一个英文表单是类似的EnForm：

# 你的SrtForm修改后
class SrtForm(forms.Form):
    text = forms.CharField(
        widget=forms.Textarea(attrs={
            'cols': 50, 
            'rows': 200, 
            'class': 'sync-scroll-textarea',  # 统一类名
            'id': 'textarea-srt'  # 可选唯一ID
        })
    )
    def __init__(self, *args, **kwargs):
        super(SrtForm, self).__init__(*args, **kwargs)
        self.fields['text'].label = ''

# 对应的英文表单EnForm类似处理
class EnForm(forms.Form):
    text = forms.CharField(
        widget=forms.Textarea(attrs={
            'cols': 50, 
            'rows': 200, 
            'class': 'sync-scroll-textarea',
            'id': 'textarea-en'
        })
    )
    def __init__(self, *args, **kwargs):
        super(EnForm, self).__init__(*args, **kwargs)
        self.fields['text'].label = ''

在你的HTML模板底部（</body>标签之前）添加这段JS代码，它会监听两个textarea的滚动事件并同步状态：

document.addEventListener('DOMContentLoaded', function() {
    // 获取两个需要同步的textarea
    const textareas = document.querySelectorAll('.sync-scroll-textarea');
    if (textareas.length !== 2) return; // 确保找到两个元素
    
    const [textareaA, textareaB] = textareas;
    let isSyncing = false; // 防止循环触发滚动事件
    
    // 监听第一个textarea的滚动，同步到第二个
    textareaA.addEventListener('scroll', function() {
        if (!isSyncing) {
            isSyncing = true;
            // 同步垂直和水平滚动位置
            textareaB.scrollTop = textareaA.scrollTop;
            textareaB.scrollLeft = textareaA.scrollLeft;
            // 短暂延迟后解除同步锁定，避免循环
            setTimeout(() => { isSyncing = false; }, 10);
        }
    });
    
    // 监听第二个textarea的滚动，同步到第一个
    textareaB.addEventListener('scroll', function() {
        if (!isSyncing) {
            isSyncing = true;
            textareaA.scrollTop = textareaB.scrollTop;
            textareaA.scrollLeft = textareaB.scrollLeft;
            setTimeout(() => { isSyncing = false; }, 10);
        }
    });
});

为了让同步滚动更自然，建议给两个textarea设置相同的固定尺寸，避免用户调整后错位。可以加一段CSS：

.sync-scroll-textarea {
    width: 100%;
    height: 600px; /* 根据你的需求调整高度 */
    resize: none; /* 禁止用户手动调整大小，保持一致 */
    box-sizing: border-box; /* 确保 padding 不影响尺寸 */
}

• 我们通过scroll事件监听每个textarea的滚动动作
• 用isSyncing变量防止循环触发：当我们设置另一个textarea的滚动位置时，会触发它的scroll事件，这个变量会暂时忽略该事件，避免无限循环
• scrollTop控制垂直滚动位置，scrollLeft控制水平滚动位置，两者都同步能覆盖所有滚动场景

这样设置后，滚动其中一个textarea，另一个就会跟着同步滚动啦！

内容的提问来源于stack exchange，提问作者Lance Chen