5

何が起こるかというと、カーソルが a に<textarea>あり、数行を入力して (別名、Enter キーを数回押した)、PageUp を押すと、Web サイト全体が移動して、カーソルがページの一番左上に移動します。まだ<textarea>です。ページのコンテンツは左に移動しますが、水平スクロール バーは表示されないため、ページを再度操作するにはページを更新するしかありません。

PageUp を押した後のイメージ

マージンが使用されている多くのラッパーと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;
}
4

2 に答える 2

0

このバグは、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/

于 2016-07-13T10:15:46.170 に答える