пользовательский свиток перепутан 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, когда прокручивался полностью вправо.Кроме того, я обнаружил, что X (слева) из scrollX_Slider был только на 483.2px

Сначала я подумал, что это может быть глупой проблемой, когда нужно прокрутить до 2200, чтобы технически быть концом, потому чтоширина одного изображения составляет 200 пикселей, но когда я настроил это, я обнаружил, что это не так.

Почему завершается прокрутка в 1731, когда ширина содержимого 2400?

Answer 1

Вы должны простить меня; Я немного изменил твой код, чтобы мне было легче с ним работать.

Во всяком случае, я думаю, что нашел решение. Я создал новую переменную, slider_x, которая будет служить отношением для положения мыши; если slider_x = 0, то ползунок слева, если 1, то справа.

Затем я умножил это значение на разницу между offsetWidth содержимого и offsetWidth контейнера. Я полагаю, что вам нужно вычесть ширину контейнера из содержимого, чтобы получить «фактическую» ширину, которая могла бы быть неправильной в вашем коде.

Вот код. Я изменил идентификаторы на строчные, так как это более семантически в отношении 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;

Если есть какие-либо проблемы с этим кодом или у вас есть еще вопросы, пожалуйста, сообщите мне.