Kullanıcı yukarı kaydırmadıkça taşma divını aşağı kaydırın

Sadece 300 piksel büyüklüğünde bir div var ve sayfa yüklendiğinde içeriğin altına kaydırmak istiyorum. Bu div, dinamik olarak eklenmiş içeriğe sahiptir ve aşağı kaydırılmaya devam etmelidir. Eğer kullanıcı yukarı kaydırmaya karar verirse, kullanıcı tekrar aşağı kaydırıncaya kadar aşağıya atlamasını istemiyorum.

Kullanıcı yukarı kaydırmadıkça ve kullanıcı tekrar aşağıya kaydırdığında altta kaydırılacak bir div olması mümkün mü, yeni dinamik içerik eklendiğinde bile kendini altta tutması gerekir. Bunu yaratarak nasıl gideceğim.

Bu size yardımcı olabilir:

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

[EDIT], yorumu eşleştirmek için ...

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

içerik eklendiğinde updateScroll () işlevini çağırın veya bir zamanlayıcı ayarlayın:

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

SADECE kullanıcı hareket etmediyse güncellemek istiyorsanız:

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

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

Bunu sadece CSS ile çalıştırabildim.

Hile kullanmak display: flex;veflex-direction: column-reverse;

Tarayıcı, alt kısmı üst kısmı gibi davranır. Desteği hedeflediğiniz tarayıcıları varsayarsak, flex-boxtek uyarı işaretlemenin ters sırada olması gerektiğidir.

İşte çalışan bir örnek. https://codepen.io/jimbol/pen/YVJzBg

Ben sadece bunu uyguladım ve belki benim yaklaşımımı kullanabilirsiniz.

Diyelim ki şu HTML'ye sahibiz:

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

Ardından, aşağıya doğru kaydırılıp kaydırılmadığını kontrol edebiliriz:

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

scrollHeight , taşma nedeniyle görünmeyen alanlar da dahil olmak üzere öğenin yüksekliğini verir. clientHeight size CSS yüksekliğini verir veya başka bir şekilde öğenin gerçek yüksekliğini söyler. Her iki yöntem de yüksekliği döndürür margin, bu yüzden endişelenmenize gerek yoktur. scrollTop size dikey kaydırmanın konumunu verir. 0 en üstte ve max öğenin scrollHeight öğesi ile eleman yüksekliğinin kendisidir. Kaydırma çubuğunu kullanırken, kaydırma çubuğunu en alta kadar aşağı indirmek zor olabilir (benim için Chrome'da). 1 piksellik bir yanlışlıkla attım. Yani isScrolledToBottomkaydırma çubuğu alttan 1px olsa bile geçerli olacak. Bunu sizin için doğru olan her şeye ayarlayabilirsiniz.

Ardından, öğenin scrollTop öğesini en alta ayarlamak önemlidir.

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

Konsepti göstermeniz için bir keman yaptım: http://jsfiddle.net/dotnetCarpenter/KpM5j/

DÜZENLEME: zaman Eklenen kod parçacığı netleştirmek için isScrolledToBottomolduğunu true.

Kaydırma çubuğunu alta yapıştır

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

Canlı demo: http://jsfiddle.net/KGfG2/

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

Or animated:

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

2020 yılında kullanabilirsiniz css çırpıda , ancak Chrome 81 düzen değişikliği öncesinde edecek tetik yeniden geçmeli değil , bir ui sohbet saf css Chrome 81 üzerinde çalışır, ayrıca kontrol edebilirsiniz Can I kullanımı CSS çırpıda .

Bu demo, görünürse son öğeyi yapıştıracaktır, efekti görmek için aşağı kaydırın.

.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 snippetetkisi görmek için. (PS: Çalışmıyorsa şunu Run code snippetdeneyin: https://jsfiddle.net/Yeshen/xm2yLksu/3/ )

2. Nasıl çalışır:

Varsayılan taşma yukarıdan aşağıya kaydırmadır.

transform: rotate(180deg) aşağıdan yukarıya doğru dinamik blok kaydırma veya yükleme yapabilirsiniz.

3. Orijinal fikir:

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

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

Bu , div öğesine dinamik içerik eklense bile kaydırma çubuğunun her zaman en alt konumda olmasını sağlamak için özelliği #yourDivIDkullanma yüksekliğinden ScrollTop Konumunu hesaplar $(document).height(). Bu yardımcı olur umarım. Ancak, yukarı kaydırıp fare işaretçisini kaydıraçtan bıraksak bile küçük bir hata var, otomatik olarak alt konuma gelecektir. Birisi bunu düzeltebilirse de iyi olur.

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

İşte dotnetCarpenter'ın cevabına dayanan versiyonum. Benim yaklaşım saf bir jQuery olduğunu ve ben işleri biraz daha açık hale getirmek için değişkenleri adlandırdı .. Ne oluyor içerik yüksekliği daha büyük ise istenen sonuç elde etmek için ekstra mesafe aşağı kaydırmak konteyner.

IE ve krom ile çalışır ..

Jim Hall'un cevabı tercih edilir, çünkü yukarı kaydırdığınızda gerçekten aşağıya kaymazken, aynı zamanda saf CSS'dir.

Ancak maalesef bu kararlı bir çözüm değildir: Kromda (muhtemelen yukarıdaki dotnetCarpenter tarafından açıklanan scrollTop1 piksel boyutundan dolayı), kullanıcı etkileşimi olmadan bile (öğe eklendikten sonra) 1 piksel yanlış davranır. Ayarlayabilirsiniz scrollTop = scrollHeight - clientHeight, ancak başka bir öğe eklendiğinde div öğesini yerinde tutacaktır; diğer bir deyişle, "kendini altta tut" özelliği artık çalışmıyor.

Kısacası, az miktarda Javascript (iç çekme) eklemek bunu düzeltir ve tüm gereksinimleri karşılar:

Https://codepen.io/anon/pen/pdrLEZ gibi bir şey (örnek Coo tarafından) ve listeye bir öğe ekledikten sonra, aşağıdakiler de:

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

burada 29 bir satırın yüksekliğidir.

Bu nedenle, kullanıcı yarım satır yukarı kaydırdığında (eğer mümkünse?), Javascript bunu yoksayar ve en alta kaydırır. Ama sanırım bu ihmal edilebilir. Ve Chrome 1 pikselini düzeltiyor.

İşte Ryan Hunt'ın bir blog yayınına dayanan bir çözüm . overflow-anchorKaydırma konumunu, kaydırılan içeriğin altındaki öğeye sabitleyen CSS özelliğine bağlıdır .

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>

Not overflow-anchorBu çözüm şu anda tüm tarayıcılarda çalışmıyor bu yüzden, Safari veya Edge anda işi yapmaz.

Böyle bir şey kullanabilirsiniz,

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

İşte böyle yaklaştım. Div yüksekliğim 650 piksel. Kaydırma yüksekliği alt kısmın 150 pikselinde ise otomatik kaydırmaya karar verdim. Aksi takdirde, kullanıcı için bırakın.

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