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

起初，我认为这可能是一个愚蠢的问题，因为单个图像的宽度是200px，它只需要滚动到2200技术上就是结束，但是当我调整了这个时，我发现这不是案件。

当内容的宽度为2400时，为什么在1731完成滚动？

Answer 1

你必须原谅我;我改变了你的代码，让我更容易使用。

无论如何，我想我找到了解决方案。我创建了一个新变量slider_x，作为鼠标位置的比例;如果slider_x = 0则滑块位于左侧，如果它位于1则位于右侧。

接下来，我将此值乘以内容的offsetWidth和容器的offsetWidth之间的差值。我相信你需要从内容中减去容器的宽度，以获得“实际”宽度，这可能是你的代码出错了。

这是代码。我将ID更改为小写，因为它更加语义化，但如果需要，可以将其更改回来。

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;

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

自定义滚动JavaScript混淆

1 个答案: