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

Question

发生的情况是，当我的光标在 a 中<textarea>并且我输入了几行（也就是按 Enter 几次）并按 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

此错误在 Win/Linux 上的 Chrome 中重现。不能在 MacOS Chrome 或任何 Mozilla、IE 上复制。看来这是一个 Chrome 错误。

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

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

http://jsfiddle.net/ARQ35/6/