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

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

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

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

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

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

谢谢

您可以从开始查看底部的滚动条

修改它以满足您的需要（稍微调整css）

使用

$（'.viewport'）[0].scrollLeft=xpos

方法，可以滚动到右x位置

以下是一个例子：

js:

css:

html:

这是一个很好的例子，它的意思是：一个词的意思是：一个词的意思是：一个词的意思是：一个词的意思是：一个词的意思是：一个词的意思是：一个词的意思是Zertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwerty

---

更新：带滑块：

如果有人想知道，我设法找到了解决方案，并以此为基础：

---

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

那是个好主意，我没想到！假设我能让它工作，我会把它标记为答案：-）谢谢

var percentage = 50;

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

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

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