自定义滚动javascript困惑

custom scroll javascript confused

本文关键字：困惑 javascript 滚动 自定义      更新时间：2023-09-26

我有一个这样的页面:

<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结束滚动?

你得原谅我;我修改了你的代码，使它更容易为我的工作。

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

接下来，我将这个值乘以内容的偏移宽度和容器的偏移宽度之差。我相信你需要从内容中减去容器的宽度，以获得"实际"宽度，这是你的代码可能出错的地方。

下面是代码。我将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;

如果这段代码有什么问题，或者还有什么问题，请告诉我

相关文章：