it-swarm.com.de

Lassen Sie den Überlauf div nach unten scrollen, wenn der Benutzer nicht nach oben blättert

Ich habe ein Div, das nur 300 Pixel groß ist, und ich möchte, wenn die Seite geladen wird, scrollen Sie zum unteren Rand des Inhalts. Dieses Div wird dynamisch mit Inhalten versehen und muss ganz nach unten gescrollt werden. Wenn sich der Benutzer nun für einen Bildlauf nach oben entscheidet, möchte ich nicht, dass er wieder nach unten springt, bis der Benutzer wieder ganz nach unten scrollen kann

Ist es möglich, ein div zu haben, das nach unten gescrollt bleibt, es sei denn, der Benutzer blättert nach oben, und wenn der Benutzer nach unten zurückblättert, muss er sich selbst nach unten bewegen, wenn neuer dynamischer Inhalt hinzugefügt wird. Wie würde ich das schaffen?.

130

gut, während dies Ihnen helfen könnte:

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

[BEARBEITEN], um den Kommentar abzugleichen ...

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

wenn Inhalt hinzugefügt wird, rufen Sie die Funktion updateScroll () auf oder setzen Sie einen Timer:

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

wenn Sie NUR aktualisieren möchten, wenn sich der Benutzer nicht bewegt hat:

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

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

Ich habe das gerade umgesetzt und vielleicht können Sie meinen Ansatz verwenden.

Nehmen wir an, wir haben folgendes HTML:

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

Dann können wir mit folgendem Befehl prüfen, ob es nach unten gescrollt wurde:

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

scrollHeight gibt die Höhe des Elements einschließlich aller nicht sichtbaren Bereiche aufgrund eines Überlaufs an. clientHeight gibt die CSS-Höhe an oder auf andere Weise die tatsächliche Höhe des Elements. Beide Methoden geben die Höhe ohne margin zurück, sodass Sie sich keine Sorgen machen müssen. scrollTop gibt die Position des vertikalen Bildlaufs an. 0 ist oben und max ist die scrollHeight des Elements minus der Elementhöhe selbst. Bei Verwendung der Bildlaufleiste kann es schwierig sein (in Chrome war dies für mich), die Bildlaufleiste ganz nach unten zu bringen. also warf ich eine 1px-Ungenauigkeit ein. isScrolledToBottom ist also auch dann wahr, wenn die Bildlaufleiste 1 Pixel von unten ist. Sie können dies auf das einstellen, was sich für Sie richtig anfühlt.

Dann müssen Sie lediglich den scrollTop des Elements nach unten setzen.

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

Ich habe eine Geige gemacht, um das Konzept zu zeigen: http://jsfiddle.net/dotnetCarpenter/KpM5j/

BEARBEITEN: Code-Snippet hinzugefügt, um zu klären, wann isScrolledToBottomtrue ist.

Stick-Bildlaufleiste unten

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>

123
dotnetCarpenter

Ich konnte das nur mit CSS arbeiten.

Der Trick ist die Verwendung von display: flex; und flex-direction: column-reverse;

Der Browser behandelt die Unterseite wie die Oberseite. Wenn Sie davon ausgehen, dass die Browser flex-box für die Unterstützung vorgesehen sind, besteht der einzige Nachteil darin, dass das Markup in umgekehrter Reihenfolge erfolgen muss.

Hier ist ein Arbeitsbeispiel. https://codepen.io/jimbol/pen/YVJzBg

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

Live-Demo: http://jsfiddle.net/KGfG2/

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

Or animated:

$("#div1").animate({ scrollTop: $('#div1')[0].scrollHeight}, 1000);
13
Sasidharan
$('#yourDivID').animate({ scrollTop: $(document).height() }, "slow");
return false;

Dadurch wird die ScrollTop-Position aus der Höhe von #yourDivID mithilfe der $(document).height()-Eigenschaft berechnet, sodass der Scroller auch dann noch an der untersten Position steht, wenn dynamische Inhalte zum Div hinzugefügt werden. Hoffe das hilft. Es hat jedoch auch einen kleinen Fehler, selbst wenn wir nach oben scrollen und den Mauszeiger vom Scroller lassen, wird er automatisch in die unterste Position gebracht. Wenn jemand das korrigieren könnte, wird es auch schön sein.

3
Krishnadas PC
//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;

Hier ist meine Version basierend auf der Antwort von dotnetCarpenter. Mein Ansatz ist eine reine jQuery und ich habe die Variablen benannt, um die Dinge ein wenig klarer zu machen. 

Funktioniert in IE und Chrom ..

2
KingOfDaNorth

Jim Halls Antwort ist vorzuziehen, da er zwar beim Scrollen nach oben nicht wirklich nach unten scrollen kann, aber es ist auch reines CSS.

Leider ist dies jedoch keine stabile Lösung: In Chrome (möglicherweise aufgrund des oben von dotnetCarpenter beschriebenen 1-px-Problems) verhält sich scrollTop um 1 Pixel ungenau, auch ohne Benutzerinteraktion (beim Element hinzufügen). Sie können scrollTop = scrollHeight - clientHeight einstellen, aber das div bleibt in Position, wenn ein anderes Element hinzugefügt wird, dh die Funktion "sich selbst am unteren Ende halten" funktioniert nicht mehr.

Kurz gesagt, das Hinzufügen einer kleinen Menge Javascript (Seufzer) wird dies beheben und alle Anforderungen erfüllen:

Etwas wie https://codepen.io/anon/pen/pdrLEZ this (Beispiel von Coo) und nachdem ein Element der Liste hinzugefügt wurde, auch Folgendes:

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

dabei ist 29 die Höhe einer Zeile.

Wenn der Benutzer also eine halbe Zeile nach oben blättert (sofern dies überhaupt möglich ist?), Wird dies vom Javascript ignoriert und nach unten gescrollt. Aber ich denke, das ist vernachlässigbar. Und es behebt das Chrome 1 px-Ding.

1
Blauhirn
.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 snippet um den Effekt zu sehen. (PS: Wenn Run code snippet nicht funktioniert, versuchen Sie Folgendes: https://jsfiddle.net/Yeshen/xm2yLksu/3/ )

  2. Wie es funktioniert:

Standardmäßig wird von oben nach unten gescrollt.

Mit transform: rotate(180deg) kann ein Bildlauf ausgeführt oder ein dynamischer Block von unten nach oben geladen werden.

  1. Originale Idee:

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

1
yisheng wu

Hier ist eine Lösung basierend auf ein Blog-Beitrag von Ryan Hunt . Dies hängt von der CSS-Eigenschaft _overflow-anchor_ ab, mit der die Bildlaufposition an ein Element am unteren Rand des Bildlaufinhalts angehängt wird.

_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>_

Beachten Sie, dass overflow-anchor derzeit nicht in Safari oder Edge funktioniert, sodass diese Lösung derzeit nicht in allen Browsern funktioniert.

0
mfluehr

Hier ist, wie ich es angegangen bin. Meine Div Höhe beträgt 650px. Ich entschied, dass, wenn die Bildlaufhöhe innerhalb von 150px des Bodens liegt, dann automatisch gescrollt wird. Andernfalls überlassen Sie es dem Benutzer.

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