如何创建可拖动的滚动条，使用javascript操作视口？

Question

我正在尝试创建一个网页底部有一个滑块的网页，可以从左向右拖动以移动视口。我试图绘制一个我想在这里实现的简单图表：

红色框是可拖动的滑块。用户应该能够将此红色框从一侧拖到另一侧，这应该与主视口中的图像相对应。有没有可用的插件？

目前我正在考虑使用jquery-ui draggable插件来处理滑块，但我不确定如何操作视口？

我想也许我可以捕捉滑块移动的距离然后将乘数应用于该值以使视口移动正确的数量，但我不确定这是否是一个明智的想法？< / p>

实现这一目标的最佳方式是什么？

由于

Answer 1

您可以从底部滚动条的jQuery UI slider开始。

修改它以满足您的需求（一点点的CSS调整）

使用$('.viewport')[0].scrollLeft = xpos方法，您可以滚动到右侧x位置。

以下是一个示例：http://jsfiddle.net/Vandeplas/zAJtL/

JS：

var percentage = 50;

$('.scrollTo').click(function(){
    var vp = $('.viewport')[0];
        vp.scrollLeft = (percentage / 100) * vp.scrollWidth;
    console.log(vp.scrollWidth);
});

css：

.viewport {
    width: 200px;
    height: 40px;
    overflow: auto; /* set to hidden to hide the default scrollbar*/
}

HTML：

<div class="viewport"> azertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwerty </div>
<input class="scrollTo" type="button" value="scroll"/>

更新：使用滑块：http://jsfiddle.net/Vandeplas/zAJtL/1/

Answer 2

如果有人想知道，我设法找到了以此为基础的解决方案：http://jeffschuette.com/2011/05/02/jquery-ui-slider-tutorial/

希望它能帮助其他人尝试实现同样的目标！