Automatisch angepasste horizontale Bildlaufleiste/Schieberegler anpassen?

Question

Ich arbeite an einer Website, die horizontal scrollt. Ich weiß sehr wenig über jQuery und den Prototyp, und ich habe dieses Slider-Skript als Seitenlaufleiste verwendet. Wenn die Größe des Fensters verkleinert wird, wird der benutzerdefinierte horizontale Schieberegler/die Bildlaufleiste nicht an die Breite des Ansichtsfensters angepasst.

Ich habe die Seite und js Dateien hier http://keanetix.co.cc/scrollpage/

Schließen Sie den Browser, um die Größe und Sie werden die benutzerdefinierten Bildlaufleiste rechts erstreckt bemerken. Die benutzerdefinierte Bildlaufleiste passt nicht in das Ansichtsfenster, es sei denn, Sie aktualisieren die Seite nach der Größenänderung.

Kann mir jemand dabei helfen? Vielen Dank.

Dies ist der Code in der HTML-Seite:

 <script type="text/javascript" language="javascript"> 
    // <![CDATA[ 

     // horizontal slider control 
     var slider2 = new Control.Slider('handle', 'track', { 
      onSlide: function(v) { scrollHorizontal(v, $('scrollable'), slider2); }, 
      onChange: function(v) { scrollHorizontal(v, $('scrollable'), slider2); } 
     }); 



     // scroll the element horizontally based on its width and the slider maximum value 
     function scrollHorizontal(value, element, slider) { 
      element.scrollLeft = Math.round(value/slider.maximum*(element.scrollWidth-element.offsetWidth)); 
     } 

     // disable horizontal scrolling if text doesn't overflow the div 
     if ($('scrollable').scrollWidth <= $('scrollable').offsetWidth) { 
      slider2.setDisabled(); 
      $('track').hide(); 
     } 

    // ]]> 
    </script> 

Answer 1

EDIT: Es scheint, dass eine Neuberechnung der Seitengröße, was gebraucht wird. Und es sieht so aus, als müsste es mit dem Prototyp-Slider gemacht werden. Ich habe es selbst nicht benutzt, also kann ich dir nicht wirklich sagen, was du in diesem Fall tun sollst. Es könnte ein Verfahren, in dem sein Plug-in, das macht es für Sie ...

---

ich nicht Ihre Seite öffnen konnte, überlasten vielleicht von SO Benutzer? : P

Aber es klingt wie Sie das Element der Größe müssen werden, die Ihre benutzerdefinierte Scrollbar hält, wenn die Fenstergröße verändert wird:

window.onresize = resizePage; 

dann Ihre ResizePage Funktion schreiben, die neue Größe zu berechnen und entsprechend zu ändern.

Als Randnotiz möchten Sie vielleicht Ihre Größenänderungsfunktion drosseln, damit Sie nicht zu viele Anrufe bekommen.

function throttle(method, context) { 
    clearTimeout(method.tId); 
    method.tId = setTimeout(function() { 
     method.call(context); 
    }, 50); 
} 

Dann nutzen Sie diese wie folgt:

window.onresize = function() { 
    throttle(resizeFrame); 
}; 

Das heißt, Sie müssen warten, bis der Benutzer „fertig“ ist das Browser-Fenster Größe ändern, bevor Sie Ihre Resize-Funktion aufrufen.