Garder débordement div défiler vers le bas à moins que l'utilisateur fait défiler jusqu'

J'ai juste mis en œuvre et peut-être vous pouvez utiliser mon approche.

Dire que nous avons le code HTML suivant:

<div id="out" style="overflow:auto"></div>

Ensuite, nous pouvons vérifier si elle défile vers le bas avec:

var out = document.getElementById("out");
//allow 1px inaccuracy by adding 1
var isScrolledToBottom = out.scrollHeight - out.clientHeight <= out.scrollTop + 1;

scrollHeight vous donne de la hauteur de l'élément, y compris les non visible, en raison de débordement. clientHeight vous donne le CSS hauteur ou dit d'une autre manière, la hauteur réelle de l'élément. Les deux méthodes retourne la hauteur sans margin, de sorte que vous n'avez pas à vous inquiéter à ce sujet. scrollTop vous donne la position du défilement verticale. 0 est top et max est le scrollHeight de l'élément moins la hauteur d'élément lui-même. Lors de l'utilisation de la barre de défilement, il peut être difficile (c'était en Chrome pour moi) pour obtenir la barre de défilement vers le bas. j'ai donc jeté dans un 1px inexactitude. Donc isScrolledToBottom sera vrai même si la barre de défilement est 1px par le bas. Vous pouvez définir ce à tout ce qui se sent le droit de vous.

Alors c'est simplement une question de réglage de la scrollTop de l'élément vers le bas.

if(isScrolledToBottom)
    out.scrollTop = out.scrollHeight - out.clientHeight;

J'ai fait du violon pour vous montrer le concept: http://jsfiddle.net/dotnetCarpenter/KpM5j/

EDIT:
Ajout d'un extrait de code à préciser lors de la isScrolledToBottom est true.

Stick de barre de défilement vers le bas

JS:

const out = document.getElementById("out")
let c = 0

setInterval(function() {
    //allow 1px inaccuracy by adding 1
    const isScrolledToBottom = out.scrollHeight - out.clientHeight <= out.scrollTop + 1

    const newElement = document.createElement("div")

    newElement.textContent = format(c++, 'Bottom position:', out.scrollHeight - out.clientHeight,  'Scroll position:', out.scrollTop)

    out.appendChild(newElement)

    //scroll to bottom if isScrolledToBottom is true
    if (isScrolledToBottom) {
      out.scrollTop = out.scrollHeight - out.clientHeight
    }
}, 500)

function format () {
  return Array.prototype.slice.call(arguments).join(' ')
}

CSS:

#out {
    height: 100px;
}

HTML:

<div id="out" style="overflow:auto"></div>
<p>To be clear: We want the scrollbar to stick to the bottom if we have scrolled all the way down. If we scroll up, then we don't want the content to move.
</p>

$('#yourDiv').scrollTop($('#yourDiv')[0].scrollHeight);

Démo Live: http://jsfiddle.net/KGfG2/

$('#yourDivID').animate({ scrollTop: $(document).height() }, "slow");
return false;

Cela permettra de calculer la ScrollTop Position à partir de la hauteur de #yourDivID à l'aide de la $(document).height() de la propriété, de sorte que même si les contenus dynamiques sont ajoutés à la div de la barre de défilement sera toujours à la position inférieure. Espérons que cette aide. Mais il a aussi un petit bug même si nous avons faites défiler vers le haut et laisse le pointeur de la souris à partir de la barre de défilement, il se mettra automatiquement à la position inférieure. Si quelqu'un pourrait corriger cela aussi, il sera agréable.

Jim Hall réponse est à préférer, car bien que ce ne sont pas faites défiler vers le bas lorsque vous êtes défiler vers le haut, c'est aussi de la pure CSS.

Très bien mais, malheureusement, ce n'est pas une solution stable: En chrome (peut-être due à l'1-px-problème décrit par dotnetCarpenter ci-dessus), scrollTop se comporte de façon inexacte par 1 pixel, même sans interaction de l'utilisateur (lors de l'élément à ajouter). Vous pouvez définir scrollTop = scrollHeight - clientHeight, mais qui va garder la div en position quand un autre élément est ajouté, aka le "tenir au fond" fonctionnalité ne fonctionne plus.

Donc, en résumé, l'ajout d'une petite quantité de Javascript (soupir) permettra de résoudre ce problème et répondre à tous les besoins:

Quelque chose comme https://codepen.io/anon/pen/pdrLEZ ce (par exemple Coo), et après l'ajout d'un élément à la liste, également les éléments suivants:

container = ...
if(container.scrollHeight - container.clientHeight - container.scrollTop <= 29) {
    container.scrollTop = container.scrollHeight - container.clientHeight;
}

où 29 est la hauteur d'une ligne.

Ainsi, lorsque l'utilisateur fait défiler jusqu'à une demi-ligne (si c'est encore possible?), le Javascript va l'ignorer et faites défiler vers le bas. Mais je suppose que c'est neglectible. Et, il résout le Chrome 1 px truc.

Voici une solution basée sur un post de blog de Ryan Chasse. Il dépend de la overflow-anchor propriété CSS, qui cloue la position de défilement à un élément au bas de l'défiler le contenu.

JS:

const messages = [
  'Expect rain today.',
  'Tomorrow will be sunny.',
  'Snow is coming next week.',
  'Hailstorms are imminent.',
];

function addMessage() {
  const $message = document.createElement('div');
  $message.className = 'message';
  $message.innerText = messages[(Math.random() * messages.length) | 0];
  $messages.insertBefore($message, $anchor);

  //Trigger the scroll pinning when the scroller overflows
  if (!overflowing) {
    overflowing = isOverflowing($scroller);
    $scroller.scrollTop = $scroller.scrollHeight;
  }
}

function isOverflowing($el) {
  return $el.scrollHeight > $el.clientHeight;
}

const $scroller = document.querySelector('.scroller');
const $messages = document.querySelector('.messages');
const $anchor = document.querySelector('.anchor');
let overflowing = false;

setInterval(addMessage, 1000);

CSS:

.scroller {
  overflow: auto;
  height: 90vh;
  max-height: 11em;
  background: #555;
}

.messages > * {
  overflow-anchor: none;
}

.anchor {
  overflow-anchor: auto;
  height: 1px;
}

.message {
  margin: .3em;
  padding: .5em;
  background: #eee;
}

HTML:

<section class="scroller">
  <div class="messages">
    <div class="anchor"></div>
  </div>
</section>

Noter que overflow-ancre ne fonctionne actuellement pas dans Safari ou de Bord, de sorte que cette solution ne fonctionne actuellement pas dans tous les navigateurs.