Gardez la div de débordement défilée vers le bas, sauf si l'utilisateur fait défiler vers le haut

J'ai un div qui ne fait que 300 pixels de large et je le souhaite lorsque la page se charge, faites défiler vers le bas du contenu. Ce div a du contenu ajouté dynamiquement et doit rester défilé jusqu'en bas. Maintenant, si l'utilisateur décide de faire défiler vers le haut, je ne veux pas qu'il revienne en bas jusqu'à ce que l'utilisateur défile à nouveau vers le bas

Est-il possible d'avoir un div qui restera défilé vers le bas à moins que l'utilisateur ne fasse défiler vers le haut et lorsque l'utilisateur défile vers le bas, il doit se maintenir en bas même lorsqu'un nouveau contenu dynamique est ajouté. Comment pourrais-je aller créer ceci.

Cela pourrait vous aider:

var element = document.getElementById("yourDivID");
element.scrollTop = element.scrollHeight;

[EDIT], pour correspondre au commentaire ...

function updateScroll(){
    var element = document.getElementById("yourDivID");
    element.scrollTop = element.scrollHeight;
}

chaque fois que du contenu est ajouté, appelez la fonction updateScroll () ou réglez une minuterie:

//once a second
setInterval(updateScroll,1000);

si vous souhaitez mettre à jour UNIQUEMENT si l'utilisateur n'a pas bougé:

var scrolled = false;
function updateScroll(){
    if(!scrolled){
        var element = document.getElementById("yourDivID");
        element.scrollTop = element.scrollHeight;
    }
}

$("#yourDivID").on('scroll', function(){
    scrolled=true;
});

J'ai pu faire fonctionner cela avec CSS uniquement.

L'astuce consiste à utiliser display: flex;etflex-direction: column-reverse;

Le navigateur traite le bas comme le haut. En supposant que les navigateurs que vous ciblez prennent en charge flex-box, la seule mise en garde est que le balisage doit être dans l'ordre inverse.

Voici un exemple de travail. https://codepen.io/jimbol/pen/YVJzBg

Je viens de l'implémenter et vous pouvez peut-être utiliser mon approche.

Disons que nous avons le code HTML suivant:

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

Ensuite, nous pouvons vérifier s'il a défilé 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 la hauteur de l'élément, y compris toute zone non visible en raison d'un débordement. clientHeight vous donne la hauteur CSS ou dit d'une autre manière, la hauteur réelle de l'élément. Les deux méthodes renvoient la hauteur sans margin, vous n'avez donc pas à vous en soucier. scrollTop vous donne la position du défilement vertical. 0 est le haut et max est le scrollHeight de l'élément moins la hauteur de l'élément lui-même. Lorsque vous utilisez la barre de défilement, il peut être difficile (c'était dans Chrome pour moi) de descendre la barre de défilement jusqu'en bas. j'ai donc ajouté une inexactitude de 1px. Il en isScrolledToBottomsera de même même si la barre de défilement est à 1 px du bas. Vous pouvez définir ce paramètre comme bon vous semble.

Il suffit ensuite de régler le scrollTop de l'élément au bas.

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

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

EDIT: extrait de code ajouté pour préciser quand isScrolledToBottomest true.

Collez la barre de défilement vers le bas

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(' ')
}

#out {
    height: 100px;
}

<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 en direct: http://jsfiddle.net/KGfG2/

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

Or animated:

$("#div1").animate({ scrollTop: $('#div1')[0].scrollHeight}, 1000);

En 2020, vous pouvez utiliser l' accrochage css , mais avant Chrome 81, le changement de disposition ne déclenchera pas de réaccrochage , une interface utilisateur de chat css pure fonctionne sur Chrome 81, vous pouvez également vérifier Puis-je utiliser l'accrochage CSS .

Cette démo va casser le dernier élément s'il est visible, faites défiler vers le bas pour voir l'effet.

.container {
  overflow-y: scroll;
  overscroll-behavior-y: contain;
  scroll-snap-type: y mandatory;
}

.container > div > div:last-child {
  scroll-snap-align: end;
}

.container > div > div {
  background: lightgray;
  height: 3rem;
  font-size: 1.5rem;
}
.container > div > div:nth-child(2n) {
  background: gray;
}

<div class="container" style="height:6rem">
<div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</div>

.cont{
height: 100px;
overflow-x: hidden;
overflow-y: auto;
transform: rotate(180deg);
direction:rtl;
text-align:left;
}
ul{
overflow: hidden;
transform: rotate(180deg);
}

<div class="cont"> 
 <ul>
   <li>0</li>
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
   <li>5</li>
   <li>6</li>
   <li>7</li>
   <li>8</li>
   <li>9</li>
   <li>10</li>  
 </ul>
</div>

1. Run code snippetpour voir l'effet. (PS: si cela Run code snippetne fonctionne pas, essayez ceci: https://jsfiddle.net/Yeshen/xm2yLksu/3/ )

2. Comment ça marche:

Le débordement par défaut est le défilement de haut en bas.

transform: rotate(180deg) peut le faire défiler ou charger un bloc dynamique de bas en haut.

3. Idée originale:

https://blog.csdn.net/yeshennet/article/details/88880252

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

Cela calculera la position ScrollTop à partir de la hauteur d' #yourDivIDutilisation de la $(document).height()propriété, de sorte que même si du contenu dynamique est ajouté à la division, le défilement sera toujours en position basse. J'espère que cela t'aides. Mais il a aussi un petit bug même si on fait défiler vers le haut et laisse le pointeur de la souris du scroller il arrivera automatiquement en position basse. Si quelqu'un pouvait aussi corriger cela, ce serait bien.

//Make sure message list is scrolled to the bottom
var container = $('#MessageWindowContent')[0];
var containerHeight = container.clientHeight;
var contentHeight = container.scrollHeight;

container.scrollTop = contentHeight - containerHeight;

Voici ma version basée sur la réponse de dotnetCarpenter. Mon approche est une pure jQuery et j'ai nommé les variables pour rendre les choses un peu plus claires.

Fonctionne dans IE et chrome ..

La réponse de Jim Hall est préférable car bien qu'elle ne défile pas vers le bas lorsque vous faites défiler vers le haut, elle est également pure CSS.

Malheureusement, ce n'est pas une solution stable: dans Chrome (peut-être en raison du problème de 1 px décrit par dotnetCarpenter ci-dessus), scrollTopse comporte de manière inexacte de 1 pixel, même sans interaction de l'utilisateur (lors de l'ajout d'élément). Vous pouvez définir scrollTop = scrollHeight - clientHeight, mais cela gardera la div en position lorsqu'un autre élément est ajouté, alias la fonction "se garder en bas" ne fonctionne plus.

Donc, en bref, l'ajout d'une petite quantité de Javascript (soupir) résoudra cela et remplira toutes les conditions:

Quelque chose comme https://codepen.io/anon/pen/pdrLEZ this (exemple par Coo), et après avoir ajouté un élément à la liste, également ce qui suit:

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 une demi-ligne (si c'est possible?), Le Javascript l'ignore et défile vers le bas. Mais je suppose que c'est négligeable. Et, il corrige le truc Chrome 1 px.

Voici une solution basée sur un article de blog de Ryan Hunt . Cela dépend de la overflow-anchorpropriété CSS, qui épingle la position de défilement à un élément au bas du contenu défilé.

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);

.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;
}

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

Notez que overflow-anchorcela ne fonctionne pas actuellement dans Safari ou Edge, donc cette solution ne fonctionne pas actuellement dans tous les navigateurs.

Vous pouvez utiliser quelque chose comme ça,

var element = document.getElementById("yourDivID");
window.scrollTo(0,element.offsetHeight);

Voici comment je l'ai abordé. Ma hauteur de div est de 650 pixels. J'ai décidé que si la hauteur de défilement est à moins de 150 px du bas, faites-la défiler automatiquement. Sinon, laissez-le à l'utilisateur.

if (container_block.scrollHeight - container_block.scrollTop < 800) {
                    container_block.scrollTo(0, container_block.scrollHeight);
}