html - 在 textarea 中按 PageUp 会将网站移出窗口

Question

当我的光标位于 <textarea> 中时会发生什么？我输入了几行(也就是按了几次回车键)，然后按了 PageUp，整个网站发生了变化，因此我的光标位于页面的最左上方，同时仍在 <textarea> 中。 .页面内容向左移动，但没有出现水平滚动条，因此再次使用该页面的唯一方法是刷新它。

这似乎是由于使用了很多带有边距的包装器加上 overflow: hidden 而发生的。这会阻止滚动条出现，但这些对于设置页面样式是必需的。

我能做些什么来阻止这种情况发生，同时又不会破坏整个布局？ (大约 4000 行 css... 只能凑合着用)

示例:http://jsfiddle.net/ARQ35/ (有趣的副作用:即使 jsfiddle 在重现此问题时也会偏离其位置)(仅在 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>

CSS:

#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;
}

Answer 1

这是一个 VanillaJS 解决方法(也可在 GitHub 上找到):

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);
  }
});

它的灵感来自这篇文章:http://www.competa.com/blog/chrome-bug-pageup-pagedown-textarea-moves-website-window/

另请参阅我创建的原始问题:https://bugs.chromium.org/p/chromium/issues/detail?id=890248