2013-05-16 105 views
0

我對我的可拖動div容器有個奇怪的問題。Webkit中的固定位置+可拖動

我嘗試使文本可拖動的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> 

在您可以顯示問題的圖片,第一個瀏覽器是Chrome,第二個是Firefox。

error with chrome and fixed position + draggable

有人知道問題出在哪裏嗎?

在此先感謝!

hansinger

回答

0

問題解決! :)這是由於鉻的錯誤。

您不能在webkit瀏覽器中使用「-webkit-transform」和固定的位置。

欲瞭解更多信息,請致電here