我正在开发一个带有可过滤组合的项目[基于此插件链接：www.gethifi.com/blog/a-jquery-plugin-to-create-an-interactive-filterable-portfolio-like-ours.
投资组合项目显示在水平滑块中,该滑块在浏览器窗口的左侧和右侧添加滚动区域(热点).
这是我的问题：
滑块的宽度是在插件smoothdivscroller www.smoothdivscroll.com中计算的.但是当我通过过滤器导航更改滑块的内容时,滑块的总宽度会发生变化,但smoothdivscroller插件没有注意到它.
我在jsfiddle中为你设置了一个简化的example,你可以在这里体验整个问题kuemmel-schnur.de/projekte：当所有项目都显示出来(Alle)并向右滚动然后切换到“Lehrprojekte”类别你将看不到任何项目因为它们位于最左侧,并且不会重新计算容器的总宽度.
为了解决这个问题,我有三个想法,我需要一些认真的帮助.
1)smoothdivscroll插件提供了一种重新计算容器宽度的公共方法
$("#makeMeScrollable").smoothDivScroll("recalculateScrollableArea");
点击投资组合列表a后,我每次都需要点火.我需要将它与滑块自动切换到当前内容的第一个元素的方法结合起来
$("#makeMeScrollable").smoothDivScroll("moveToElement","first");
2)我的第二个想法 – 因为我不知道是否或如何1)工作 – 是检查网址是否改变然后解开重新计算.过滤器使用哈希来处理内容.所以我想我可以读出网址,每次直接在哈希更改后的部分,我可以解雇该方法.
3)我可以将可过滤的插件绑定到smoothDivScroll插件上(比如完全错误的代码:)
$('#portfolio-list').filterable();
$('#portfolio-filter a').click(function(){
$('#makeMeScrollable').smoothDivScroll("moveToElement","first")("recalculateScrollableArea");
});
所以你怎么看？再次jsfiddle链接：jsfiddle.net/tobiasmay/QudtF/
谢谢,
TOBI.
解决方法
filterportfolio,并从那里重新计算/ moveToElement.
$("body").bind("filterportfolio",function()
{
var
interval = 50,duration = 1000;
var intervalId = setInterval(function()
{
$("#makeMeScrollable").smoothDivScroll("recalculateScrollableArea");
duration -= interval;
if(duration <= 0)
{
clearInterval(intervalId);
}
},interval);
$("#makeMeScrollable").smoothDivScroll("moveToElement","first");
});
在javascript控制台on the live site中使用它时似乎有效.将代码块添加到aks.js或在Chrome中试用：转到该站点,打开控制台,粘贴代码并按Enter键.在从问题中重现步骤时应该立即工作：向右滚动,单击过滤器.
编辑：由于过滤中的动画,动画完成后需要调用.smoothDivScroll(…).由于动画可能看起来有点难看,如果只调用一次,重新计算将在持续时间毫秒内完成几次,间隔时间间隔为毫秒.
