Html 在文本区域中按PageUp可将网站移出窗口

发生的情况是，当我的光标位于

中，我键入了几行（也就是说，按enter键几次）并按下PageUp时，整个网站都会移动，这样我的光标就位于页面的最左上方，而仍然在

中。页面内容会向左移动，但不会出现水平滚动条，因此再次使用页面的唯一方法是刷新页面

这似乎是由于使用了许多带有边距的包装，加上阻止滚动条出现的

overflow:hidden

，但这些都是页面设计所必需的

我能做些什么来阻止这种情况发生，同时又不破坏整个布局？（大约4000行css…只能用我现有的来凑合）

示例：（有趣的副作用：即使是JSFIDLE在复制此版本时也会偏离其位置）（仅在Chrome和Opera中）

HTML:

<div id="ultrawrap">
    <div class="wrap1">
        <div class="wrap2">
            <div class="wrap3">
                <section id="content" class="content">
                     <h1>Fiddle of situation</h1>

                     <h3>Press enter a few times and push PageUp.</h3>

                    <form id="form" method="post">
                        <table style="width: 100%;">
                            <tbody>
                                <tr>
                                    <td>
                                        <textarea cols="85" id="id" name="name" rows="6" style="width: 90%">in here</textarea>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </form>
                    <div>
                        <br />
                        <br />
                        <br />space filler so that there's a scrollbar
                        <br />
                        <br />
                        <br />space filler
                        <br />
                        <br />
                        <br />space filler
                        <br />
                        <br />
                        <br />space filler
                        <br />
                        <br />
                        <br />space filler
                        <br />
                        <br />
                        <br />space filler
                        <br />
                        <br />
                        <br />space filler
                        <br />
                        <br />
                        <br />space filler
                        <br />
                        <br />
                        <br />space filler</div>
                </section>
            </div>
        </div>
    </div>
</div>

#ultrawrap {
    overflow: hidden;
    width: 100%;
    position: relative;
}
.wrap1 {
    width: 500px;
    position: relative;
    float: left;
    left: 50%;
    background: url() repeat-x 50% 0;
}
.wrap2 {
    width: 500px;
    position: relative;
    float: left;
    left: -50%;
    background: url() repeat-x 50% 259px;
}
.wrap3:after {
    content:'';
    display: block;
    clear: both;
}
.wrap3 {
    background: url() repeat-y 50% 0;
    width: 480px;
    margin: 0 auto;
}

---

此错误在Win/Linux上的Chrome中重现。不在MacOS Chrome或任何Mozilla上复制，也就是说，这似乎是一个Chrome bug

似乎唯一的方法是替换向下/向上翻页功能：

$(document).ready(function(){
$("textarea").keydown(function(event){
    if (event.which == 33) {
        window.scrollTo(0, window.scrollY);
        event.preventDefault();
        event.target.setSelectionRange(0, 0);
        $(this).scrollTop(0);
    }
    if (event.which == 34) {
        window.scrollTo(0, window.scrollY);
        event.preventDefault();
        textareaLength = $(this).val().length;
        event.target.setSelectionRange(textareaLength,textareaLength);
        $(this).scrollTop(9999);
    }
}); });

---

这里有一个VanillaJS解决方案（也可从以下网站获得）：

这篇文章的灵感来源于：

---

另请参见我创建的原始问题：

您是否找到了原因/解决方案？我也有，还在Chrome Win/Linux中复制。不在Chrome MacOSI中复制引发了一个问题：

document.querySelector('textarea').addEventListener('keydown', event => {
  if (event.key === 'PageUp' || event.key === 'PageDown') {
    const cursorPosition = event.key === 'PageUp' ? 0 : event.target.textLength;

    event.preventDefault();
    event.target.setSelectionRange(cursorPosition, cursorPosition);
  }
});