Redimensionner automatiquement la barre de défilement/le curseur horizontal personnalisé?

Question

Je travaille sur un site qui défile horizontalement. Je sais très peu de choses sur jQuery et le prototype et j'ai eu ce script curseur qui fonctionne comme la barre de défilement de la page. Lorsque la fenêtre est redimensionnée plus petite, le curseur/la barre de défilement horizontal personnalisé ne sera pas redimensionné à la largeur de la fenêtre.

J'ai la page et les fichiers js ici http://keanetix.co.cc/scrollpage/

Essayez de redimensionner le navigateur et vous remarquerez la barre de défilement personnalisé extension vers la droite. La barre de défilement personnalisée ne tient pas sur la fenêtre, sauf si vous actualisez la page lorsqu'elle a été redimensionnée.

Quelqu'un peut-il m'aider? Merci.

Voici le code dans la page HTML:

 <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: Il semble que ce qui est nécessaire est un nouveau calcul de la taille de la page. Et il semble que cela doive être fait avec le curseur prototype. Je ne l'ai pas utilisé moi-même, donc je ne peux pas vraiment vous dire quoi faire dans ce cas. Il pourrait y avoir une méthode dans le plug-in qui fait pour vous ...

---

Je ne pouvais pas ouvrir votre page, peut-être des utilisateurs surchargez SO? : P

Mais il semble que vous aurez besoin de redimensionner l'élément qui tient votre barre de défilement personnalisée à chaque fois que la fenêtre est redimensionnée:

window.onresize = resizePage; 

écrire ensuite votre fonction resizePage pour calculer la nouvelle taille et changer en conséquence. En guise de remarque, vous pouvez ralentir votre fonction de redimensionnement afin d'éviter les appels trop nombreux.

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

Ensuite, utilisez cela comme suit:

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

Cela signifie que vous allez attendre jusqu'à ce que l'utilisateur est « terminé » redimensionnement de la fenêtre du navigateur avant d'appeler votre fonction de redimensionnement.