Jquery SmoothDivScroll插件-IE在向左拖动滚动条时完全锁定

我已经在一个弹出窗口的页面上设置了

简化的初始化函数，启动插件并根据内容长度设置可滚动区域的宽度：

$('.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>

（向下滚动并单击绿色的“检查目录”按钮）

在Chrome和Firefox中运行良好。。。但是，在IE中（当然），您可以向右滚动（单击并向左拖动）很好，但是如果您尝试向左滚动（单击并向右拖动），则浏览器会快速锁定，完全冻结，必须通过taskmanager终止

我不太清楚这个插件到底对DOM做了什么，所以我不知道现在应该在哪里查找问题

---

我确实还有一个关于插件的问题，与IE问题无关。如果需要，我可以删除此内容并将其作为单独的问题发布：

---

Q） 如何使用键盘上的箭头键实现此滑块的左/右滑动？我知道如何将某些内容绑定到键，但我似乎不知道如何将处理程序转换为插件的操作。

我查看了这个问题，发现

plugin.js

中存在的

jquery.kinetic

版本导致了这个问题。我不知道为什么会发生这种情况，因为我还没有将您的kinetic.js版本与smoothdivscroll.com上使用的版本进行比较。但是，如果您只是更新

plugin.js

以将

jquery.kinetic

的代码替换为

http://www.smoothdivscroll.com/js/jquery.kinetic.js

那么我相信一切都会顺利进行

请按照以下步骤操作：

1） 打开URLhttp://www.smoothdivscroll.com/js/jquery.kinetic.js 然后从那里复制JS代码。 2） 在在线JS压缩机的帮助下http://javascriptcompressor.com/; 缩小上述复制的代码并将其保存在临时文件中。 3） 打开你的/js/plugin.js，注释掉jquery.kinetic的现有代码，并在那里添加上面的压缩代码。 4） 运行演示页面，它也可以在IE上运行。

---

谢谢

init函数中的“count”变量只是滑块中纵向对象的总数。它是动态填充的，不只是3个（我只放了3个来显示标记）。有人能确认他们确实能够从上面提供的构建链接中看到/重新创建问题吗？是的，我能够从上面的链接重新创建问题。感谢为我跟踪此问题。我下周回去工作时会更新代码，如果行得通，我会把赏金寄给你。我不知道为什么我的版本最终会与smoothdivscroll网站上的版本不同，因为除了那个插件，我没有使用kinetic。。。

.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); }