jQuery UI 滑块问题

Question

我在使用 jQuery UI 滑块小部件时遇到了一些问题。我可以让滑块本身工作，但它不会滑过任何内容。你可以在这里看到我正在开发的网站： jquery slider problem

我希望在您使用处理程序滑动时滑动带有青色边框框的 div，但我根本无法让它工作。这是我目前使用的标记：

<div id="content-scroll" class="reference-scroller">
<div id="content-holder" class="reference-content">
  <div id="content-slider"></div>
  <ul>
    <li class="content-item">test1</li>
    <li class="content-item">test2</li>
    <li class="content-item">test3</li>
    <li class="content-item">test4</li>
    <li class="content-item">test5</li>
     .....
  </ul>
</div>
</div>

滑块插件是这样启动的：

$("#content-slider").slider({
animate: true,
change: handleSliderChange,
slide: handleSliderSlide
});

function handleSliderChange(e, ui)
{
var maxScroll = $("#content-scroll").attr("scrollWidth") - $("#content-scroll").width();
$("#content-scroll").animate({scrollLeft: ui.value * (maxScroll / 100) }, 1000);
}

function handleSliderSlide(e, ui)
{
var maxScroll = $("#content-scroll").attr("scrollWidth") - $("#content-scroll").width();
$("#content-scroll").attr({scrollLeft: ui.value * (maxScroll / 100) });
}

有人对此提出建议吗？ :-) 非常感谢任何输入！

一切顺利，

博

Answer 1

终于找到漏洞了！ :-)

jQuery 1.6.1 区分了attr()和prop()，所以我改了：

function handleSliderChange(e, ui)
{
    var maxScroll = $("#content-scroll").attr("scrollWidth") - $("#content-scroll").width();
    $("#content-scroll").animate({scrollLeft: ui.value * (maxScroll / 100) }, 1000);
}

function handleSliderSlide(e, ui)
{
    var maxScroll = $("#content-scroll").attr("scrollWidth") - $("#content-    scroll").width();
    $("#content-scroll").attr({scrollLeft: ui.value * (maxScroll / 100) });
}

收件人：

function handleSliderChange(e, ui)
{
    var maxScroll = $("#content-scroll").prop("scrollWidth") - $("#content-scroll").width();
    $("#content-scroll").animate({scrollLeft: ui.value * (maxScroll / 100) }, 1000);
}

function handleSliderSlide(e, ui)
{
    var maxScroll = $("#content-scroll").prop("scrollWidth") - $("#content-scroll").width();
    $("#content-scroll").prop({scrollLeft: ui.value * (maxScroll / 100) });
}

现在它可以正常工作了！