0

jqueryにライトボックスを追加し、クリックすると削除するスクリプトを作成しました。

Google Chrome のみで奇妙な動作が見られました。ライトボックスが閉じているときにマウスホイールでスクロールすると、メインの div をスクロールできなくなります (本文ではなく、ウェブサイトの div をスクロールします)。div をクリックして再度スクロールする必要があります。ライトボックスが閉じているときにマウスホイールに触れないと、その後すべてが正常に機能し、通常どおりdivをスクロールできます....プリローダーdivでもこの動作を観察します。最後に、メインのスクロール可能な div よりも大きな z-index を持つ div を (スクロール中に) 削除すると、このバグが常に発生します...

スクロール可能な div とライトボックスの css:

#inner-container {
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 4;
    height: 100%;
    width: 100%;
}
.light-box-container {
    position: fixed;
    display: table;
    overflow: hidden;
    vertical-align: baseline;
    z-index: 9999;
    width: 100%;
    min-width: 320px;
    height: 100%;
    margin: 0;
    opacity: 0;
    background: rgba(0,0,0,0.8);
    cursor: pointer;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
}

ライトボックスを閉じるスクリプト:

$(document).on('click touchend', function(e) {
    var $this = e.target;
    if ( $this.className == 'light-box-container light-box-anim' || $this.className == 'light-box-inner light-box-inner-anim' || $this.className == 'icon-remove') {
        $(lightboxImage).removeClass(lightboxAnimIn);
        $(lightboxInner).removeClass(lightboxAnimIn);
        setTimeout(function() {
            $(lightboxContainer).removeClass(lightboxAnim);
        }, 300);
        setTimeout(function() {
            $(lightboxContainer).remove();
            lightboxId++;
        }, 700);
    }
})

それがGoogle Chromeのバグなのか、それとも私のスクリプトによるものなのかはわかりません。そして、私はそれを解決する方法を本当に知りません。スクロール可能な div でクリックまたはフォーカスをトリガーしようとしましたが、機能しません。

4

0 に答える 0