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 （向下滚动并单击绿色的“检查目录”按钮）

在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/;缩小上面复制的代码并将其保存在临时文件中。

4）运行演示页面，它也适用于IE。

谢谢！

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

1 个答案: