自定义滚动javascript

我的页面设置如下：

<div id='container' style='width:670px;height:400px;overflow:hidden'>
<div id='content' style='width:2400px'>
there are images 200px by 200px, 12 across, 12 down
</div></div>

有200px x x 200px的图像，12幅横过，12幅向下

然后我开始创建一个简单的水平滚动条，如下所示：

HTML:

JavaScript:

//myX = Mouse X, 
  if(scrollX_Sliding=='on')
  {
   document.getElementById('scrollX_Slider').style.left = (myX<=25)?0 + "px":(myX>=670-25)?670-50 + "px":myX -25 + "px"; // sets the slider position within the boundaries.
   document.all.container.scrollTop = (((myX-25)/(670))*document.all.content.offsetWidth); // supposed to convert ratio of slider over boundary to scrollLeft over offsetWidth
  }

//myX=鼠标X，
如果（滚动X_滑动=='on'）
{
document.getElementById（'scrollX_Slider'）。style.left=（myX=670-25）？670-50+“px”：myX-25+“px”；//设置边界内的滑块位置。
document.all.container.scrollTop=（（myX-25）/（670））*document.all.content.offsetWidth）；//应该将滑块在边界上的比例转换为scrollLeft在offsetWidth上的比例
}

现在，除了一件让我困惑的事情外，一切都正常了： 滚动条在实际到达边界末端之前滚动到内容末端

当我试着调试时，我发现

document.all.content.offsetWidth

显示为2400，这是正确的，但当一直向右滚动时，容器的滚动左侧仅为1731。另外，我发现

scrollX\u滑块的X（左）仅为483.2px

起初，我认为这可能是一个愚蠢的问题，它只需要滚动到2200就可以结束，因为一张图像的宽度是200px，但当我调整这一点时，我发现情况并非如此

当内容宽度为2400时，为什么它在1731完成滚动？
请原谅；我稍微修改了你的代码，让我更容易使用

不管怎样，我想我找到了解决办法。我创建了一个新变量slider_x，作为鼠标位置的比率；如果slider_x=0，则滑块位于左侧，如果为1，则滑块位于右侧

接下来，我将该值乘以内容的offsetWidth和容器的offsetWidth之间的差值。我认为您需要从内容中减去容器的宽度，以获得“实际”宽度，这可能是您的代码有问题的地方

这是密码。我将ID改为小写，因为它更符合css的语义，但如果需要，您可以将其更改回小写

var container = document.getElementById('container');
var content = document.getElementById('content');
var scrollx_controls = document.getElementById('scrollx_controls');

var width = scrollx_controls.offsetWidth;
var slider_x = myX / width;

document.getElementById('scrollx_slider').style.left = (slider_x*(width-50)) + "px";

var scroll_x = slider_x * (content.offsetWidth-container.offsetWidth);

container.scrollLeft = scroll_x;

如果此代码有任何问题，或者您还有其他问题，请告诉我。
您是指document.all.container.scrollLeft吗？（因为你写了scrollTop）是的，谢谢你的关注，这很有意义。我会尽快尝试，如果不起作用，我会告诉你。我的猜测是，关于查找内容的实际大小，您是对的，但是为什么200px宽度的12个图像不是2400？谢谢
var container = document.getElementById('container');
var content = document.getElementById('content');
var scrollx_controls = document.getElementById('scrollx_controls');

var width = scrollx_controls.offsetWidth;
var slider_x = myX / width;

document.getElementById('scrollx_slider').style.left = (slider_x*(width-50)) + "px";

var scroll_x = slider_x * (content.offsetWidth-container.offsetWidth);

container.scrollLeft = scroll_x;