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

Question

我正在尝试创建一个在页面底部具有滑块的网页，可以将其从左向右拖动以移动视口。 我试图在这里画出一个简单的图以说明我要实现的目标：

红色框是可拖动的滑块。 用户应该能够左右拖动该红色框，并且该框应与主视口中的图像相对应。 有没有可用的插件？

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

我在想，也许我可以捕获滑块移动的距离，然后对该值应用乘数，以将视口移动正确的数量，但是我不确定这是否是明智的主意？

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

谢谢

Answer 1

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

对其进行修改以适合您的需求（少量的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/

希望它可以帮助其他尝试实现同一目标的人！