0

ドラッグ可能な div コンテナーに奇妙な問題があります。

テキストをドラッグ可能な Div を作成しようとしており、各 Div の見出しを貼り付けたいと思っています。Firefoxではすべて完璧に動作しますが、Chrome(webkit ..)ではそうではありません:(

ドラッグ可能な機能の私のコードは

$content.children().draggable({
    axis: "y",
    snap: true,
    distance: 20,
    start: function(e,ui){
        //...
    },
    drag: function(e) {

        $('.sc_conSticky').each(function(index) {
            var $this = $(this),           // h1.headerSticky
                $wrap = $this.parent(),    // .textwrapper
                $win = $(window);          //window


                var wrapPos = $wrap.offset().top, 
                    elemSize = $this.outerHeight(),
                    wrapSize = $wrap.outerHeight(),
                    scrollPos = 0;    //$win.scrollTop(); always 0 o.O

                if (    scrollPos >= wrapPos  &&
                    (wrapSize + wrapPos) >= (scrollPos + elemSize)) {
                    $this.css({
                        position: 'fixed',
                        top: 0
                    });
                } else if (scrollPos < wrapPos) {
                    $this.css({
                        position: 'absolute',
                        top: 0
                    });
                } else {
                    $this.css({
                        position: 'absolute',
                        top: wrapSize - elemSize
                    });
                }
        });

    },
    stop: function(e,ui) {
        //...
});

私のHTML構造は次のようになります

<div class="textwrapper">
   <h1 class="sc_conSticky">  </h1>
  text text text .... 
</div>
<div class="textwrapper">
   <h1 class="sc_conSticky">  </h1>
  text text text .... 
</div>

写真で問題を示すことができます。最初のブラウザーはクロムで、2 番目のブラウザーは Firefox です。

クロムと固定位置+ドラッグ可能なエラー

誰かが問題がどこにあるか知っていますか?

前もって感謝します！

ハンシンガー

4

1 に答える 1

0

問題が解決しました！:) Chrome のバグが原因でした。

「-webkit-transform」と webkit ブラウザーでの位置固定を併用することはできません。

詳細については、ここを表示

于 2013-05-16T22:26:59.657 に答える