SmoothDivScroll插件 - 將滾動條向左拖動時IE完全鎖定

Question

我在彈出窗口中設置了頁面上的SmoothDivScroll plugin 1.3。

簡化init函數的基礎上，內容長度觸發滾動區的插件和套寬度：

$('.slider').smoothDivScroll({ 
    hotSpotScrolling: false, 
    touchScrolling: true, 
    manualContinuousScrolling: true 
}).find('.scrollableArea').css('width', count * 140); 

簡化的標記：

<div class='slider'> 
    <div class="portrait" style="background-image: url(img/bios/testing-thumb1.jpg);"></div> 
    <div class="portrait" style="background-image: url(img/bios/testing-thumb2.jpg);"></div> 
    <div class="portrait" style="background-image: url(img/bios/testing-thumb3.jpg);"></div> 
</div> 

CSS， 'scrollWrapper' 和 'scrollableArea' 均爲初始化時由插件創建：

.slider { position: absolute; top: 0; left: 0; border-top: 2px solid #000; border-bottom: 2px solid #000; height: 168px; width: 880px; } 

.slider .scrollWrapper { position: relative; overflow: hidden; width: 100%; height: 100%; } 
.slider .scrollableArea { position: relative; width: auto; height: 100%; } 

.slider .portrait { display: block; float: left; padding: 0 5px; width: 130px; height: 168px; position: relative; margin-bottom: 4px; background-position: center top; background-repeat: no-repeat; } 
.slider .portrait:hover, .slider .portrait.active { background-position: center bottom; } 
.slider .portrait:after { display: none; content: ""; position: absolute; top: 0; left: 5px; height: inherit; width: inherit; pointer-events: none; } 
.slider .portrait:hover:after { display: block; background-image: url(../img/popup-about-team-hover.png); } 

Click here to see development build （向下滾動並點擊綠色的「檢查目錄」按鈕）

在Chrome和Firefox中正常工作......但在IE中（當然），您可以滾動到右側（單擊並拖動到左側）很好，但如果你嘗試向左滾動（單擊並向右拖動），瀏覽器會很快鎖定，完全凍結，必須通過taskmanager終止。

我不明白插件對DOM做了什麼，足以知道在哪裏尋找問題。

---

我確實有一個關於該插件的其他問題，與此IE問題無關。如果需要，我可以將其作爲一個單獨的問題刪除：

問）我怎樣才能使用鍵盤上的箭頭鍵實現此滑塊的左/右滑動？我知道如何將某些東西綁定到鍵上，但我似乎無法弄清楚如何將處理程序轉換爲插件的操作。

Answer 1

我看了一下這個問題，發現你的jquery.kinetic版本存在於plugin.js中就是造成這個問題。我不知道爲什麼會發生這種情況，因爲我沒有將您的kinetic.js版本與smoothdivscroll.com上使用的版本進行比較。但是，如果你只是更新你的plugin.js來代替jquery.kinetic的代碼與http://www.smoothdivscroll.com/js/jquery.kinetic.js的壓縮/縮小版本，那麼我相信一切都會毫無問題地工作。

請按照下列步驟操作：

1）打開URL http://www.smoothdivscroll.com/js/jquery.kinetic.js並從那裏複製JS代碼。

2）在線JS壓縮機的幫助，如http://javascriptcompressor.com/;縮小上面的複製代碼並將其保存在臨時文件中。

3）打開你的/js/plugin.js並註釋掉現有的jquery.kinetic代碼，並在其中添加上面的壓縮代碼。

4）運行演示頁面，它也可以在IE上運行。

謝謝！