web-dev-qa-db-fra.com

Comment faire défiler une div vers le bas en ajoutant du contenu HTML via jquery tout en masquant la barre de défilement?

Ci-dessous, j'ai un petit simulateur basé sur js pour différents outils de commande. L'utilisateur entre une commande et, si elle est correcte, elle la affiche en haut. Pour les utilisations futures, je dois m'assurer qu'il peut gérer autant de commandes que nécessaire avant la simulation. Cela signifie inévitablement que le contenu débordera.

Ma solution consistait maintenant à définir le dépassement en Y sur auto, en ajoutant la barre de défilement et un petit jQuery pour que le client continue de défiler en bas de la div en sortie, car le contenu est ajouté en dessous du contenu précédent chaque fois qu'un utilisateur entre la commande correcte.

Pour le moment, cela fonctionne bien, sauf que je voudrais supprimer la barre de défilement. J'aimerais que le contenu se comporte de la même manière que le débordement automatique le ferait et le ferait, sauf sans une barre de défilement visible.

enter image description here

Est-il possible de faire cela avec jquery ou javascript?

Je sais que je peux faire quelques astuces CSS pour mettre une sorte de noir sur la barre de défilement avec un z-index, mais j'aimerais éviter cela si possible.

javascriptjqueryscrollscrollbar
14
Eric

Tout ce dont vous avez besoin est d’ajouter overflow: hidden à votre conteneur et de le faire défiler une fois le contenu chargé:

div.scrollTop = div.scrollHeight;

Démo http://jsfiddle.net/nT75k/2/

30
dfsq

Oui, vous pouvez ajouter un écouteur d'événement et lorsque cet événement est émis, vous pouvez le faire défiler jusqu'en bas en vérifiant la hauteur comme suit

$container = $('.container');
$container[0].scrollTop = $container[0].scrollHeight;

$('.input').keypress(function (e) {
  if (e.which == 13) {
    $container = $('.container');
    $container.append('<p class="row">' + e.target.value + '</p>');
    $container.animate({ scrollTop: $container[0].scrollHeight }, "slow");
  }
});

http://jsfiddle.net/w2qbe/

9
Josh Bedo

Continuez à utiliser le javascript pour faire le défilement et placez le div contenant votre simulateur dans un autre div un peu moins large et effectuez un débordement masqué sur la div externe. J'ai utilisé cette technique plusieurs fois et c'est très amusant.

La seule chose à laquelle vous devez faire attention est que les barres de défilement ont des largeurs légèrement différentes selon les navigateurs, soyez donc prudent.

par exemple:

html:

<div id="outside">
    <div id="inside">
        <div>more content 1</div>
        <div>more content 2</div>
        <div>more content 3</div>
        <div>more content 4</div>
        <div>more content 5</div>
        <div>more content 6</div>
        <div>more content 7</div>
        <div>more content 8</div>
        <div>more content 9</div>
        <div>more content 8</div>
        <div>more content 7</div>
        <div>more content 6</div>
        <div>more content 5</div>
        <div>more content 4</div>
        <div>more content 3</div>
        <div>more content 2</div>
        <div>more content 1</div>
    </div>
</div>

css:

div#outside {
    width: 120px;
    height: 100px;
    overflow: hidden;
}

div#inside {
    width: 135px;
    height: 100px;
    overflow-y: auto;
}

Découvrez ce violon -> http://jsfiddle.net/5bkz5/1/ <- et faites défiler le texte!

3
Andbdrew

div.scrollTop = div.scrollHeight;

mais vous n'avez pas besoin de overflow: hidden.

0
Michael Bleidistel