自定义滚动 javascript 混淆

Question

我有一个像这样设置的页面：

<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>

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

HTML：

<div style='position:absolute;left:0px;top:400px;height:20px;width:670px;' id='scrollX_Controls'>
<div style='position:absolute;left:0px;top:0px;width:50px;height:20px;' id='scrollX_Slider' onMouseDown="scrollX_Sliding='on';"></div></div>

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
  }

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

当我尝试调试时，我发现 document.all.content.offsetWidth 出现为 2400，这是正确的，但是当一直向右滚动时，容器的scrollLeft仅在1731处。另外，我发现 scrollX_Slider 的 X（左）仅在 483.2px

起初，我认为这可能是一些愚蠢的问题，从技术上讲，它只需要滚动到 2200 即可结束，因为单张图片的宽度是200px，但是当我调整这个宽度时，我发现情况并非如此。

为什么内容宽度为 2400 时却在 1731 处结束滚动？

Answer 1

你必须原谅我；我稍微更改了您的代码，以便我更容易使用。

无论如何，我想我找到了解决方案。我创建了一个新变量 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;

如果此代码有任何问题，或者您还有其他问题，请告诉我。