जब तक उपयोगकर्ता स्क्रॉल न करें तब तक ओवरफ्लो डिवा को नीचे स्क्रॉल करें

Question

मेरे पास एक div है जो केवल 300 पिक्सेल बड़ा है और मैं यह चाहता हूं कि जब पृष्ठ लोड हो जाए तो सामग्री के नीचे स्क्रॉल करें। इस div में गतिशील रूप से सामग्री जोड़ी गई है और सभी तरह से नीचे स्क्रॉल किए जाने की आवश्यकता है। अब यदि उपयोगकर्ता स्क्रॉल करने का निर्णय लेता है तो मैं नहीं चाहता कि वह नीचे तक वापस कूद जाए जब तक उपयोगकर्ता फिर से सभी तरह से स्क्रॉल न करे

क्या यह संभव है कि एक ऐसा डिवोर्स हो जो नीचे तक स्क्रॉल किया जाए जब तक कि उपयोगकर्ता स्क्रॉल नहीं करता है और जब उपयोगकर्ता वापस नीचे स्क्रॉल करता है तो उसे नए डायनामिक कंटेंट को जोड़ने पर भी खुद को सबसे नीचे रखने की आवश्यकता होती है। मैं इसे बनाने के लिए कैसे जाऊंगा।

Comments

सीएसएस स्थिति शीर्ष का उपयोग करें इसे नीचे रखें {position : relative; bottom:0;}। उपयोगकर्ता के स्क्रॉल करते ही css प्रॉपर्टी को हटा दें।

— TCHdvlp

जब से आप एक उत्तर स्वीकार नहीं करते, मैं पूछना चाहता हूं: क्या यह आपके लिए काम करता है?

— मि। मैनहट्टन

एक चैटबॉक्स की तरह लगता है जिसे आप पूरा करना चाहते हैं

— Thielicious

इस सवाल के लिए नए, 2020 में सीएसएस स्नैप की कोशिश करनी चाहिए ।

— मारी

Answer 1

यह आपकी मदद कर सकता है:

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

[EDIT], टिप्पणी से मेल करने के लिए ...

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

जब भी सामग्री जोड़ी जाती है, तो फंक्शन अपडेट को कॉल करेंस्रोक्रोल (), या टाइमर सेट करें:

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

यदि आप केवल तभी अपडेट करना चाहते हैं यदि उपयोगकर्ता स्थानांतरित नहीं हुआ है:

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

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

Comments

यह अच्छी तरह से पृष्ठ लोड पर नीचे तक स्क्रॉल करता है, लेकिन जब उपयोगकर्ता को स्क्रॉल किया जाता है, तो डायनामिक सामग्री को जोड़ने पर मुझे इसे नीचे रहने की आवश्यकता होती है।

— रॉबर्ट ई। मैकिन्टोश

जहां तक ​​मैं बता सकता हूं कि यह डायनेमिक स्क्रॉलिंग को फिर से सक्षम नहीं करता है जब उपयोगकर्ता नीचे स्क्रॉल करता है ...

— TvE

@ क्या यह नहीं है कि हम समर्थन जोड़ा जा सकता है?

— बर्कर्मन 01

बुरा हल। setIntervalइस हल्के समस्या के लिए जोड़ने का कोई कारण नहीं है।

— इथनक्रिस्ट

@ethancrist हालांकि, आप कोई विकल्प नहीं देते ... श्रग।

— जेरेट लॉयड

Answer 2

मैं इसे केवल CSS के साथ काम करने में सक्षम था।

चाल का उपयोग करना है display: flex;औरflex-direction: column-reverse;

ब्राउज़र नीचे के ऊपर की तरह व्यवहार करता है। आपके द्वारा समर्थित लक्ष्य को ब्राउज़रों को मानते हुए flex-box, केवल चेतावनी यह है कि मार्कअप को उल्टे क्रम में होना है।

यहाँ एक कार्य उदाहरण है। https://codepen.io/jimbol/pen/YVJzBg

Comments

आप एक अतिरिक्त आवरण जोड़कर सामग्री को उल्टा करने की आवश्यकता के आसपास हो सकते हैं, और overflow:auto; display:flex; flex-direction:column-reverse;आंतरिक आवरण के बजाय बाहरी आवरण पर आवेदन कर सकते हैं।

— नाथन आर्थर

शायद सबसे अच्छा समाधान क्योंकि यह जावास्क्रिप्ट की जरूरत नहीं है।

— अमित कुमार खरे

@ नथनअर्थर उ दा असली mvp

— php_nub_qq

@NathanArthur में तथ्य, करने के लिए आप बस कंटेनर के नीचे एक div जोड़ने अन-रिवर्स सब कुछ: codepen.io/anon/pen/pdrLEZ

— सीओओ

दुर्भाग्य से यह समाधान फ़ायरफ़ॉक्स में काम नहीं करता है :(

— स्टुअर्ट

Answer 3

मैंने अभी इसे लागू किया है और शायद आप मेरे दृष्टिकोण का उपयोग कर सकते हैं।

कहें कि हमारे पास निम्न HTML हैं:

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

तब हम जांच कर सकते हैं कि क्या यह नीचे तक स्क्रॉल किया गया है:

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

स्क्रॉलहाइट आपको अतिप्रवाह के कारण किसी भी गैर-दृश्य क्षेत्र सहित तत्व की ऊंचाई देता है। क्लाइंटहाइट आपको सीएसएस ऊंचाई देता है या किसी अन्य तरीके से कहा जाता है, तत्व की वास्तविक ऊंचाई। दोनों विधियाँ बिना ऊँचाई के लौटती हैं margin, इसलिए आपको उस बारे में चिंता करने की आवश्यकता नहीं है। स्क्रॉलटॉप आपको वर्टिकल स्क्रॉल की स्थिति देता है। 0 सबसे ऊपर है और अधिकतम तत्व की ऊंचाई है जो स्वयं तत्व की ऊंचाई है। स्क्रोलबार का उपयोग करते समय यह मुश्किल हो सकता है (यह मेरे लिए क्रोम में था) स्क्रॉलबार को नीचे की तरफ नीचे लाने के लिए। तो मैं एक 1px अशुद्धि में फेंक दिया। तो isScrolledToBottomभी सच होगा अगर स्क्रॉलबार नीचे से 1px है। आप इसे अपने लिए सही मान सकते हैं।

फिर यह तत्व के स्क्रॉलटॉप को नीचे तक सेट करने की बात है।

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

मैंने आपको अवधारणा दिखाने के लिए एक फिडेल बनाया है: http://jsfiddle.net/dotnetCarpenter/Kpp525/

संपादित करें: जोड़ा गया कोड स्निपेट कब isScrolledToBottomहै यह स्पष्ट करने के लिए true।

नीचे स्क्रॉल स्क्रॉल पट्टी

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>

Comments

यह वास्तव में एकमात्र समाधान है जो बताए गए प्रश्न को पूरा करता है। और सही उत्तर के रूप में चिह्नित किया जाना चाहिए था।

— प्रीज़ज़ी

@dotnetCarpenter: यह मुझे लगता है जैसे कि आप की जरूरत है if(!isScrolledToBottom): परीक्षण मुझे गलत लगता है (और जब तक मैंने इसे ठीक नहीं किया मेरे कोड में काम नहीं किया )।

— luskwater

@ निष्कर्ष आप अपने फिक्स के साथ एक fsfiddle प्रदान कर सकते हैं? मुझे इस मुद्दे की समझ नहीं है out.scrollHeight - out.clientHeight <= out.scrollTop + 1। क्या आप अपने CSS में पैडिंग का उपयोग कर रहे हैं?

— डॉटनेटकारपेंटर

यह वही है जिसे मैं देख रहा था। और, यह ओपी द्वारा पूछे गए प्रश्न का उत्तर है। धन्यवाद dotnetCarperter।

— लुइस मेंजिवर

अगर किसी को स्क्रॉल करते समय 0 मिल रहा है, तो मैं document.getScrollingElementयहां सुझाए अनुसार उपयोग करने का सुझाव देता हूं : stackoverflow.com/questions/36227559/scrolltop-always-returns-0/…

— डेन जॉर्डन

Answer 4

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

लाइव डेमो: http://jsfiddle.net/KGfG2/

Comments

यह अच्छी तरह से पृष्ठ लोड पर नीचे तक स्क्रॉल करता है, लेकिन जब उपयोगकर्ता को स्क्रॉल किया जाता है, तो डायनामिक सामग्री को जोड़ने पर मुझे इसे नीचे रहने की आवश्यकता होती है।

— रॉबर्ट ई। मैकिन्टोश

यह पूरी तरह से काम करता है। मैं गतिशील सामग्री के साथ अपडेट कर रहा हूं और स्क्रॉल हमेशा सबसे नीचे होता है।

— एंडी बजका

Answer 5

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

Or animated:

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

Comments

यह अच्छी तरह से पृष्ठ लोड पर नीचे तक स्क्रॉल करता है, लेकिन जब उपयोगकर्ता को स्क्रॉल किया जाता है, तो डायनामिक सामग्री को जोड़ने पर मुझे इसे नीचे रहने की आवश्यकता होती है।

— रॉबर्ट ई। मैकिनटोश

यह तब काम नहीं करता है जब पहले शॉट में डिव बहुत बढ़ता है। उदाहरण के लिए कोणीय- js, अभिक्रिया js, उल्का ब्लेज़ टेम्प्लेट लोडिंग, यह काम नहीं करेगा।

— अंकुर सोनी

इसने मेरे लिए काम किया। मुझे लगता है कि यह ठीक काम करता है अगर प्रश्न में div एक सुसंगत ऊंचाई रहने वाला है। गतिशील ऊंचाइयों के साथ इसका परीक्षण नहीं किया गया।

— doij790

Answer 6

2020 में, आप उपयोग कर सकते हैं सीएसएस स्नैप का , लेकिन क्रोम 81 से पहले लेआउट परिवर्तन फिर से स्नैप ट्रिगर नहीं करेगा , क्रोम 81 पर एक शुद्ध सीएसएस चैट यूआई काम करता है, आप यह भी देख सकते हैं कि क्या मैं सीएसएस स्नैप का उपयोग कर सकता हूं ।

यह डेमो अंतिम तत्व को स्नैप करेगा यदि दृश्यमान, प्रभाव देखने के लिए नीचे स्क्रॉल करें।

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

Answer 7

.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प्रभाव देखने के लिए। (पुनश्च: यदि Run code snippetकाम नहीं कर रहा है, तो यह प्रयास करें: https://jsfiddle.net/Yeshen/xm2yLksu/3/ )

2. यह कैसे कार्य करता है:

डिफ़ॉल्ट ओवरफ्लो ऊपर से नीचे तक स्क्रॉल होता है।

transform: rotate(180deg) इसे नीचे से ऊपर तक डायनामिक ब्लॉक स्क्रॉल या लोड कर सकते हैं।

3. मूल विचार:

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

Comments

कृपया इस बारे में और स्पष्टीकरण दें कि आपके कोड ने ओपी के प्रश्न को कैसे हल किया

— jro

1, एक अतिरिक्त परिचय जोड़ा गया है। 2, कृपया Run code snippet, सीधे प्रभाव देखें।

— यिशेंग वू

रन कोड स्निपेट बटन मेरे लिए दिखाई नहीं देता है। अपने स्वरूपण की जाँच करें

— jro

एक दम बढ़िया। कृपया अपने उत्तर में लिंक शामिल करें

— jro

बहुत रचनात्मक समाधान। हालाँकि, यह मेरे माउस के स्क्रॉल व्हील के सामान्य संचालन को उलट देता है। ऊपर जाने के लिए, मुझे "नीचे," स्क्रॉल करना होगा और इसके विपरीत।

— mfluehr

Answer 8

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

यह संपत्ति का #yourDivIDउपयोग करने की ऊंचाई से स्क्रॉलटॉप स्थिति की गणना करेगा ताकि डायवर्टर में $(document).height()डायनेमिक कंटेंट जोड़े जाने पर भी स्कोरर हमेशा नीचे की स्थिति में हो। उम्मीद है की यह मदद करेगा। लेकिन इसमें एक छोटा सा बग भी होता है, भले ही हम स्क्रॉल करते हैं और माउस पॉइंटर को स्क्रोलर से छोड़ते हैं यह स्वचालित रूप से नीचे की स्थिति में आ जाएगा। अगर कोई इसे सही कर सकता है तो यह अच्छा होगा।

Answer 9

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

यहाँ मेरा संस्करण dotnetCarpenter के उत्तर पर आधारित है। मेरा दृष्टिकोण एक शुद्ध jQuery है और मैंने चीजों को थोड़ा स्पष्ट करने के लिए चर का नाम दिया है .. क्या हो रहा है यदि सामग्री की ऊंचाई अधिक है, तो कंटेनर हम वांछित परिणाम प्राप्त करने के लिए अतिरिक्त दूरी नीचे स्क्रॉल करते हैं।

IE और क्रोम में काम करता है ..

Answer 10

जिम हॉल का जवाब बेहतर है क्योंकि जब आप स्क्रॉल किए जाते हैं तो यह वास्तव में नीचे स्क्रॉल नहीं करता है, यह शुद्ध सीएसएस भी है।

बहुत दुर्भाग्य से, हालांकि, यह एक स्थिर समाधान नहीं है: क्रोम में (संभवतः ऊपर डॉटनेटपेंटर द्वारा वर्णित 1-पीएक्स-इश्यू के कारण), scrollTop1 पिक्सेल द्वारा गलत तरीके से व्यवहार करता है, यहां तक ​​कि उपयोगकर्ता बातचीत के बिना (तत्व जोड़ने पर)। आप सेट कर सकते हैंscrollTop = scrollHeight - clientHeight , लेकिन यह div को स्थिति में रखेगा जब एक और तत्व जोड़ा जाता है, उर्फ ​​"खुद को नीचे रखें" सुविधा अब काम नहीं कर रही है।

तो, संक्षेप में, जावास्क्रिप्ट (आह) की एक छोटी राशि को जोड़ने से यह ठीक हो जाएगा और सभी आवश्यकताओं को पूरा करेगा:

कुछ इस तरह https://codepen.io/anon/pen/pdrLEZ यह (Coo द्वारा उदाहरण), और सूची में एक तत्व जोड़ने के बाद, निम्नलिखित भी:

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

जहां 29 एक पंक्ति की ऊंचाई है।

इसलिए, जब उपयोगकर्ता आधे लाइन को स्क्रॉल करता है (यदि यह भी संभव है?), तो जावास्क्रिप्ट इसे अनदेखा करेगा और नीचे तक स्क्रॉल करेगा। लेकिन मुझे लगता है कि यह उपेक्षित है। और, यह Chrome 1 px चीज़ को ठीक करता है।

Answer 11

यहाँ एक समाधान रयान हंट द्वारा ब्लॉग पोस्ट पर आधारित है । यह overflow-anchorसीएसएस संपत्ति पर निर्भर करता है , जो स्क्रॉल की गई सामग्री के नीचे एक तत्व को स्क्रॉल करने की स्थिति को पिन करता है।

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>

ध्यान दें कि overflow-anchorवर्तमान में सफारी या एज में काम नहीं करता है, इसलिए यह समाधान वर्तमान में सभी ब्राउज़रों में काम नहीं करता है।

Answer 12

आप कुछ इस तरह का उपयोग कर सकते हैं,

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

Comments

कृपया इसे समझाएं!

— स्ज़बोल्कस पाल

1.scrollTo एक ऐसी विधि है जो पूरी विंडो को विशेष निर्देशांक तक स्क्रॉल करती है। 2. ऑफसेटहाइट आपके तत्व की ऊंचाई देगा इसलिए उपरोक्त कोड की दूसरी पंक्ति विंडो को नीचे स्क्रॉल करती रहती है जब आप कुछ असाइन कर रहे हैं।

— यशेश चौहान

Answer 13

यहाँ है कि मैं इसे कैसे संपर्क किया। मेरी div ऊँचाई 650px है। मैंने फैसला किया कि यदि स्क्रॉल ऊंचाई नीचे के 150px के भीतर है तो ऑटो इसे स्क्रॉल करें। और, इसे उपयोगकर्ता के लिए छोड़ दें।

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