Плагин SmoothDivScroll - IE полностью блокируется при перетаскивании скроллера влево

Question

Я установил SmoothDivScroll plugin 1.3 на странице во всплывающем окне.

Упрощенная функция инициализации, запускает плагин и устанавливает ширину прокруткой области на основе длины содержимого:

$('.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 (прокрутите вниз и нажмите зеленую кнопку «check directory»)

Прекрасно работает в Chrome и Firefox ... однако в IE (конечно) вы можете прокрутить вправо (нажмите и перетащите влево) отлично, но если вы попробуете прокрутить влево (щелкните и перетащите вправо), браузер быстро закроется, полностью заморожен и должен быть убит с помощью диспетчера задач.

Я не совсем понимаю, что плагин делает с DOM достаточно хорошо, чтобы знать, где искать проблемы на этом этапе.

---

У меня возникли еще вопросы о плагине, не связанные с этой проблемой IE. Я могу удалить это и опубликовать в качестве отдельного вопроса, если это необходимо:

Q) Как я мог использовать реализацию левого/правого слайда для этого слайдера, используя клавиши со стрелками на клавиатуре? Я знаю, как связать что-то с ключами, но я не могу понять, как перевести обработчик в действие для плагина.

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.

Спасибо!