Comment puis-je placer à gauche de la barre de défilement sur un tbody élément d'un tableau pour Google Chrome?

J'ai regardé dans cette question et ne peut pas trouver une solution.
Le site web est un RTL site donc je voudrais les barres de défilement sur la gauche.
J'ai vu quelques astuces qui peuvent de ce fait obtenir sauf si j'ai vraiment besoin d'elle.

La Tbody élément de la table doit faire défiler vers le bas sans la ligne d'en-tête en train de disparaître.
Je peux obtenir la barre de défilement sur le côté droit de la tbody mais n'ont aucune idée de comment le déplacer vers la gauche.

Toutes les idées comment obtenir le TBody de la barre de défilement sur le côté gauche sera très appréciée.

J'ai de la chance il a seulement à travailler sur Google Chrome.

  • Je suppose que vous avez essayé d'utiliser le CSS direction: rtl qui permet de déplacer la barre de défilement dans certains navigateurs (je ne le pense pas dans Chrome).
  • Oui j'ai grâce - malheureusement, il ne fonctionne pas.
  • Spécifique à Firefox: La position de la barre de défilement verticale est basée sur la localisation du client, et ne peut pas être changé uniquement avec du CSS. Elle peut être remplacée par l'évolution de la layout.scrollbar.side à 1 dans about:config, qui permettra direction: rtl; pour déplacer la barre de défilement verticale. Chrome peut avoir un paramètre similaire, mais je ne suis pas familier avec elle.
  • Il y a un jQuery solution (qui, évidemment, serait d'exiger la bibliothèque jQuery être lié ainsi que le plugin lui-même): jScrollPane démo.
  • Thomas - Merci pour le lien, Il ne semble pas à l'adresse de Tables et Tbody.
  • Merci pour Firefox astuce ne pouvait pas trouver quelque chose comme ça dans google Chrome

InformationsquelleAutor | 2011-02-25
  1. 1

    Il ne peut pas être changé avec les CSS. Par exemple, il y a des navigateurs (iPhone, ANdroid) qui n'ont pas de barres de défilement. La barre de défilement de la position dépend entièrement sur le système de l'utilisateur, pas de la page web.

    Vous pouvez utiliser Javascript pour imiter ce que vous voulez. Faire glisser la barre de défilement de remplacement, de la placer sur la gauche, et d'ajuster le caché de débordement de la fonction lorsque l'utilisateur fait glisser la "barre de défilement".

    Essayer de googler pour "jquery, la barre de défilement" " ou "javascript barre de défilement".

    Voici une alternative intéressante pour le défilement... de la faire Glisser (similaire à la façon dont vous faites glisser des cartes dans google maps):
    http://plugins.jquery.com/project/MapScroller

    Et encore une autre alternative, voici un script qui calcule la largeur des utilisateurs de la barre de défilement:
    http://plugins.jquery.com/project/ba-jquery-scrollbarwidth-plugin
    Vous pouvez calculer la largeur, puis masquer la barre de défilement avec overflow:hidden, puis ajouter une div sur la gauche avec la même hauteur que la case que vous voulez faire défiler et de même largeur que l'utilisateur de la barre de défilement, puis d'écrire un script qui permet de faire défiler la zone de droite de la même position que celui sur la gauche, imitant ainsi construit dans le système de barres de défilement.

    Il y a des possibilités infinies, il suffit d'utiliser google pour trouver ce dont vous avez besoin et faire preuve de créativité. 😉

    Mais, je pense que c'est exactement ce que vous cherchez:
    http://baijs.nl/tinyscrollbar/
    Comme vous pouvez le voir dans les exemples, la barre de défilement est faite d'éléments. Vous pouvez les placer sur la gauche si vous le souhaitez.

    Peut-être que, avec ceci:
    http://plugins.jquery.com/project/tbodyscroll
    est EXACTEMENT ce dont vous avez besoin. 😉

    Vérifier cela, voici un exemple de travail:
    http://jsfiddle.net/trusktr/xQSxJ/

    Je vais le mettre à jour bientôt à travailler avec une table juste pour mon propre exercice. 😉

    La plupart du temps vous ne trouverez que des solutions partielles et devront improviser à venir avec une gamme complète et unique solution. 🙂 Bonne chance.

    • pourriez-vous fournir un exemple ou un lien vers une explication sur la façon de faire ce que vous recommandez?
    • Bien sûr, je vais mettre à jour la réponse.
    • J'ai voté votre réponse pour votre effort et liens utiles. Veuillez noter que les solutions présentées ne permettent pas de résoudre mon problème: Une barre de défilement sur la gauche de l'une des tables tbody, dans un RTL page d'aide de Google Chrome.
    • Julian, ces liens ne sont en effet de résoudre votre problème (enfin, pas directement). Voici comment faire: à l'Aide de tinyscrollbar vous permet d'utiliser le HTML/CSS pour positionner votre barre de défilement sur la gauche de n'importe où vous voulez.
    • Je vous suggère de commencer à mettre en œuvre l'échantillon à baijs.nl/tinyscrollbar et puis essayez de jouer avec le HTML et le CSS pour comprendre comment mettre la barre de défilement sur la gauche.
    • Comme une question de fait, si vous utilisez Google Chrome, je vais vous montrer comment faire pour le voir en action. Voir la mise à jour dans la réponse.
    • Aussi, la recherche pour "tbodyscroll" dans Google a abouti à de nombreuses pages de gens qui essaient de faire un corps de défilement, sans l'en-tête du tableau de défilement. Vous pourriez être en mesure de trouver plus de réponses sur que et mélanger tinyscrollbar avec un autre code pour obtenir l'effet désiré.
    • De toute façon, désolé, je ne pourrais pas vous donner une solution exacte, car je n'ai pas le temps de la conception de votre site, mais nous espérons qu'avec cet exemple que je vous ai montré, vous pouvez vous diriger dans la bonne direction. 🙂
    • J'apprécie vraiment vos efforts, mais aussi loin que je peux voir, vous n'êtes pas dans la bonne direction. Je ne peux pas mettre un div dans une des tables tbody donc cette approche ne fonctionnera pas. Je ne veux pas réécrire mon site web à ce stade. Donc je suppose que je vais devoir vivre avec à Droite des barres de défilement pour l'instant. Merci encore
    • Vous ne pouvez pas être en mesure de mettre un <div> élément à l'intérieur <table> élément, mais qui n'a pas d'importance. Vous pouvez avoir le <div> contrôle de barre de défilement de la table de la position de défilement de l'extérieur de la table. Vous pouvez simplement placer la barre de défilement à côté de la table et obtenir l'effet. Le <div> simplement des contrôles de l'objet désiré du défilé position, indépendamment de l'endroit où il se trouve. Heck, vous pourriez avoir de la barre de défilement animer une boîte qui se trouve dans un totalement séparé fenêtre du navigateur, si vous vouliez. De toute façon, que pourrait être un projet pour un tout autre jour.
    • tbody n'est qu'une partie d'une table, toute la barre de défilement à l'extérieur de la table n'aura pas le positionnement correct.
    • Javascript peut utiliser des pourcentages. En utilisant quelque chose comme tinyscrollbar, ce serait quelque chose comme: si la barre de défilement défilement 45%, puis faites défiler jusqu'alors contenu de la table de 45%. Il avait un travail à la perfection. Vous pourriez avoir à creuser à travers le javascript pour trouver les variables et les paramètres. La principale chose que vous devez comprendre, c'est que tinyscroll bar n'est pas une vraie barre de défilement. En réalité, c'est juste un <div> dans votre page web. Lorsque vous le déplacez, javascript faites défiler l'autre élément en conséquence.

    InformationsquelleAutor trusktr
  2. 1

    Comme mentionné plus haut. Ce n'est pas une question CSS, vous pouvez, toutefois, que trusktr a déclaré, créer un cusom javascript barre de défilement. Fondamentalement, vous le mettez en place quelque chose comme ça.

    <div id="frame">
 <div id="scrollbar">
  Actual scrollbar
 </div>
 <div id="content">
  Content here
 </div>
</div>
<style>
 #frame {
 height: 400px;
 overflow: hidden;
}
</style>

    Puis vous créez un objet déplaçable à l'intérieur de la barre de défilement qui les changements de position de la position relative du contenu à l'intérieur du cadre.

    • Comment cela s'applique à un élément Tbody (Partie d'un Tableau HTML)? Il travaillera dans Google Chrome?
    • Est-il possible de déplacer le thead dans une table distincte et le mettre juste au-dessus de l'image pour donner l'impression qu'ils font partie de la même table, ou peut-être vous pouvez créer le tout avec des divs et la faire ressembler à une table. Si c'est vraiment pour pour fonctionner uniquement sur la tbody, je n'ai aucune idée.
    • Je ne préfère pas, je vais réécrire mon site.
    InformationsquelleAutor Zeta Two
  3. 1

    CSS pour utiliser "direction:rtl;" cependant, les résultats peuvent varier selon les navigateurs.

    InformationsquelleAutor Shea