স্ক্রোল অবস্থান বজায় রাখা কেবল তখনই কাজ করে যখন বার্তাগুলির ডিভের নীচে থাকে না

আমি অন্যান্য মোবাইল চ্যাটিং অ্যাপগুলির নকল করার চেষ্টা করছি যেখানে আপনি send-messageপাঠ্যবক্সটি নির্বাচন করেন এবং এটি ভার্চুয়াল কীবোর্ডটি খুললে, নীচের দিকের বার্তাটি এখনও দেখা যায়। সিএসএসের সাথে আশ্চর্যরূপে এটি করার কোনও উপায় বলে মনে হচ্ছে না, তাই জাভাস্ক্রিপ্ট resize(কীবোর্ডটি খোলা এবং স্পষ্টভাবে বন্ধ হয়ে গেলে এটি সন্ধানের একমাত্র উপায়) ইভেন্টগুলি এবং ম্যানুয়ালটিকে উদ্ধারের উদ্দেশ্যে স্ক্রোলিং করা হয়।

কেউ এই সমাধান সরবরাহ করেছেন এবং আমি এই সমাধানটি খুঁজে পেয়েছি , যা উভয়ই কার্যকর বলে মনে হচ্ছে।

এক ক্ষেত্রে বাদে। জন্য কিছু কারণ, আপনি যদি মধ্যে রয়েছে MOBILE_KEYBOARD_HEIGHT(আমার ক্ষেত্রে 250 পিক্সেল) বার্তাগুলি DIV আছে নীচে এর পিক্সেল, যখন আপনি মোবাইল কীবোর্ড বন্ধ করুন, অদ্ভুত কিছু ঘটবে। পূর্ববর্তী সমাধান সহ, এটি নীচে স্ক্রোল করে। এবং পরবর্তী সমাধানের সাহায্যে এটি MOBILE_KEYBOARD_HEIGHTনীচে থেকে পিক্সেলগুলিকে উপরে স্ক্রোল করে ।

আপনি যদি এই উচ্চতার উপরে স্ক্রোল করে থাকেন তবে উপরের সরবরাহিত উভয় সমাধান নির্দোষভাবে কাজ করে। আপনি যখন নীচের দিকে থাকবেন কেবল তখনই তাদের কাছে এই ছোটখাটো সমস্যা রয়েছে।

আমি ভেবেছিলাম এটি কেবলমাত্র আমার প্রোগ্রামটি কিছু অদ্ভুত বিপথগামী কোডের কারণে ঘটায়, তবে না, আমি এমনকি একটি বেড়ালটিকে পুনরুত্পাদন করেছি এবং এটিতে এই সঠিক সমস্যা রয়েছে। এটিকে ডিবাগ করা এত কঠিন করার জন্য দুঃখিত, তবে আপনি যদি আপনার ফোনে https://jsfiddle.net/t596hy8d/6/show (শো প্রত্যয়টি একটি পূর্ণ-স্ক্রিন মোড সরবরাহ করে) যান তবে আপনি এটি দেখতে সক্ষম হবেন একই আচরণ

সেই আচরণটি যদি আপনি যথেষ্ট পরিমাণে স্ক্রোল করেন তবে কীবোর্ডটি খোলার এবং বন্ধ করা অবস্থানটি বজায় রাখে। তবে, আপনি যদি নীচের পিক্সেলের মধ্যে কীবোর্ডটি বন্ধ করেন তবে দেখতে MOBILE_KEYBOARD_HEIGHTপাবেন যে এটি পরিবর্তে নীচে স্ক্রোল করে।

এর কারণ কী ?

কোড পুনরুত্পাদন এখানে:

window.onload = function(e){ 
  document.querySelector(".messages").scrollTop = 10000;
  
  bottomScroller(document.querySelector(".messages"));
}
  

function bottomScroller(scroller) {
  let scrollBottom = scroller.scrollHeight - scroller.scrollTop - scroller.clientHeight;

  scroller.addEventListener('scroll', () => { 
  scrollBottom = scroller.scrollHeight - scroller.scrollTop - scroller.clientHeight;
  });   

  window.addEventListener('resize', () => { 
  scroller.scrollTop = scroller.scrollHeight - scrollBottom - scroller.clientHeight;

  scrollBottom = scroller.scrollHeight - scroller.scrollTop - scroller.clientHeight;
  });
}

.container {
  width: 400px;
  height: 87vh;
  border: 1px solid #333;
  display: flex;
  flex-direction: column;
}

.messages {
  overflow-y: auto;
  height: 100%;
}

.send-message {
  width: 100%;
  display: flex;
  flex-direction: column;
}

<div class="container">
  <div class="messages">
  <div class="message">hello 1</div>
  <div class="message">hello 2</div>
  <div class="message">hello 3</div>
  <div class="message">hello 4</div>
  <div class="message">hello 5</div>
  <div class="message">hello 6 </div>
  <div class="message">hello 7</div>
  <div class="message">hello 8</div>
  <div class="message">hello 9</div>
  <div class="message">hello 10</div>
  <div class="message">hello 11</div>
  <div class="message">hello 12</div>
  <div class="message">hello 13</div>
  <div class="message">hello 14</div>
  <div class="message">hello 15</div>
  <div class="message">hello 16</div>
  <div class="message">hello 17</div>
  <div class="message">hello 18</div>
  <div class="message">hello 19</div>
  <div class="message">hello 20</div>
  <div class="message">hello 21</div>
  <div class="message">hello 22</div>
  <div class="message">hello 23</div>
  <div class="message">hello 24</div>
  <div class="message">hello 25</div>
  <div class="message">hello 26</div>
  <div class="message">hello 27</div>
  <div class="message">hello 28</div>
  <div class="message">hello 29</div>
  <div class="message">hello 30</div>
  <div class="message">hello 31</div>
  <div class="message">hello 32</div>
  <div class="message">hello 33</div>
  <div class="message">hello 34</div>
  <div class="message">hello 35</div>
  <div class="message">hello 36</div>
  <div class="message">hello 37</div>
  <div class="message">hello 38</div>
  <div class="message">hello 39</div>
  </div>
  <div class="send-message">
	<input />
  </div>
</div>

স্নিপেট প্রসারিত করুন

— রায়ান পেশেল
সূত্র

আমি ইভেন্ট হ্যান্ডলারগুলি ইন্টারসেকশনঅবার্সার এবং রিসাইজঅবার্সবারের সাথে প্রতিস্থাপন করব। ইভেন্ট হ্যান্ডলারের তুলনায় তাদের সিপিইউ ওভারহেড অনেক কম। আপনি যদি পুরানো ব্রাউজারগুলি লক্ষ্য করে থাকেন তবে উভয়েরই পলিফিল রয়েছে।

— বিগলেস

আপনি মোবাইল ডিভাইসগুলির জন্য ফায়ারফক্সে এটি চেষ্টা করেছেন? এই সমস্যাটি বলে মনে হচ্ছে না। তবে, Chrome এ এটি চেষ্টা করার ফলে আপনি উল্লিখিত সমস্যাটির কারণ হয় না।

— রিচার্ড

ঠিক আছে, এটি যাইহোক Chrome এ কাজ করতে হবে। এটি দুর্দান্ত ফায়ারফক্সের সমস্যা নেই যদিও।

— রায়ান পেশেল

আমার বক্তব্যটি সঠিকভাবে না জানাতে আমার খারাপ। একটি ব্রাউজারে একটি সমস্যা আছে এবং অন্য নেই, এই, আইএমও, হয়, তাহলে হতে পারে মানে আপনি যে হতে পারে বিভিন্ন ব্রাউজারের জন্য কিছুটা ভিন্ন বাস্তবায়ন করতে হবে।

— রিচার্ড

পছন্দ করুন আমি দেখি. অনুস্মারকটির জন্য আপনাকে ধন্যবাদ, পরের বার যখনই আমি কাউকে উত্তরটি দেখতে বলি তখন আমি তা বিবেচনায় নেব।

— রিচার্ড

উত্তর:

আমি অবশেষে একটি সমাধান পেয়েছি যা আসলে কাজ করে। যদিও এটি আদর্শ নাও হতে পারে তবে এটি আসলে সব ক্ষেত্রেই কাজ করে। কোডটি এখানে:

bottomScroller(document.querySelector(".messages"));

bottomScroller = scroller => {
  let pxFromBottom = 0;

  let calcPxFromBottom = () => pxFromBottom = scroller.scrollHeight - (scroller.scrollTop + scroller.clientHeight);

  setInterval(calcPxFromBottom, 500);

  window.addEventListener('resize', () => { 
    scroller.scrollTop = scroller.scrollHeight - pxFromBottom - scroller.clientHeight;
  });
}

পথে আমার কিছু এপিফিনি ছিল:

ভার্চুয়াল কীবোর্ড বন্ধ করার সময়, scrollইভেন্টের তাত্ক্ষণিকভাবে একটি ইভেন্ট ঘটে resize। এটি কেবলমাত্র কীবোর্ডটি বন্ধ করার সময় ঘটবে বলে মনে হচ্ছে, এটি খোলার নয়। এই কারণেই আপনি scrollইভেন্টটি সেট করতে ব্যবহার করতে পারবেন না pxFromBottom, কারণ আপনি নীচের কাছাকাছি থাকলে এটি scrollইভেন্টের ঠিক আগে ইভেন্টে নিজেকে 0 এ সেট করে দেবে resize, গণনা জড়াল।
সমস্ত সমাধানের বার্তার ডিভ বার্তাগুলির নীচের কাছে কেন সমস্ত সমস্যার অসুবিধা হচ্ছিল তার অন্য কারণটি বোঝা কিছুটা জটিল। উদাহরণস্বরূপ, আমার আকার পরিবর্তন করতে আমি scrollTopভার্চুয়াল কীবোর্ড খোলার বা বন্ধ করার সময় কেবল 250 (মোবাইল কীবোর্ড উচ্চতা) যুক্ত বা বিয়োগ করি । এটি নীচের কাছাকাছি বাদে পুরোপুরি কাজ করে। কেন? কারণ ধরা যাক আপনি নীচ থেকে 50 পিক্সেল এবং কীবোর্ডটি বন্ধ করুন। এটি scrollTop(কীবোর্ডের উচ্চতা) থেকে 250 টি বিয়োগ করবে তবে এটি কেবল 50 টি বিয়োগ করা উচিত! সুতরাং নীচের দিকে কীবোর্ড বন্ধ করার সময় এটি সর্বদা ভুল স্থির অবস্থানে পুনরায় সেট হবে।
আমি এও বিশ্বাস করি যে আপনি এই সমাধানটির জন্য ব্যবহার করতে পারবেন না onFocusএবং onBlurইভেন্টগুলিও ঘটবে না কারণ এগুলি কেবল তখনই ঘটে যখন প্রাথমিকভাবে কীবোর্ড খোলার জন্য পাঠ্যবক্সটি নির্বাচন করা হয়। আপনি এই ইভেন্টগুলি সক্রিয় না করেই মোবাইল কীবোর্ডটি খুলতে এবং বন্ধ করতে পুরোপুরি সক্ষম এবং এর মতো তারা এখানে ব্যবহার করতে সক্ষম হয় না।

আমি বিশ্বাস করি যে সমাধানগুলির বিকাশের জন্য উপরের বিষয়গুলি গুরুত্বপূর্ণ, কারণ সেগুলি প্রথমে অ-স্পষ্ট, তবে একটি শক্তিশালী সমাধানকে বিকাশ করা থেকে বিরত করে।

আমি এই সমাধানটি পছন্দ করি না (অন্তরালটি কিছুটা অদক্ষ এবং জাতিগত অবস্থার প্রবণ) তবে আমি সর্বদা কার্যকরভাবে এর চেয়ে ভাল কিছু পাই না।

— রায়ান পেশেল
সূত্র

আমার মনে হয় আপনি যা চান তা overflow-anchor

সমর্থন ক্রমবর্ধমান, তবে মোট নয়, এখনও https://caniuse.com/#feat=css-overflow-anchor

এটি সম্পর্কে একটি সিএসএস-ট্রিকস নিবন্ধ থেকে:

বর্তমান অবস্থানের উপরে DOM এ পরিবর্তনগুলি চলাকালীন পৃষ্ঠায় ব্যবহারকারীর অবস্থানটি লক করে স্ক্রোল অ্যাঙ্করিং সেই "জাম্পিং" অভিজ্ঞতাটিকে বাধা দেয়। এটি ডিওমে নতুন উপাদান লোড হওয়ার পরেও ব্যবহারকারীরা পৃষ্ঠায় যেখানে রয়েছে সেখানে নোঙ্গর থাকতে দেয়।

ওভারফ্লো-অ্যাঙ্কর সম্পত্তি আমাদের উপাদানগুলি লোড হওয়ায় সামগ্রী পুনরায় প্রবাহিত করার অনুমতি দেওয়া পছন্দ হয় এমন ইভেন্টে স্ক্রোল অ্যাঙ্করিং বৈশিষ্ট্যটি অপ্ট আউট করার অনুমতি দেয়।

এখানে তাদের উদাহরণগুলির একটিটির সামান্য পরিবর্তিত সংস্করণ:

let scroller = document.querySelector('#scroller');
let anchor = document.querySelector('#anchor');

// https://ajaydsouza.com/42-phrases-a-lexophile-would-love/
let messages = [
  'I wondered why the baseball was getting bigger. Then it hit me.',
  'Police were called to a day care, where a three-year-old was resisting a rest.',
  'Did you hear about the guy whose whole left side was cut off? He’s all right now.',
  'The roundest knight at King Arthur’s round table was Sir Cumference.',
  'To write with a broken pencil is pointless.',
  'When fish are in schools they sometimes take debate.',
  'The short fortune teller who escaped from prison was a small medium at large.',
  'A thief who stole a calendar… got twelve months.',
  'A thief fell and broke his leg in wet cement. He became a hardened criminal.',
  'Thieves who steal corn from a garden could be charged with stalking.',
  'When the smog lifts in Los Angeles , U. C. L. A.',
  'The math professor went crazy with the blackboard. He did a number on it.',
  'The professor discovered that his theory of earthquakes was on shaky ground.',
  'The dead batteries were given out free of charge.',
  'If you take a laptop computer for a run you could jog your memory.',
  'A dentist and a manicurist fought tooth and nail.',
  'A bicycle can’t stand alone; it is two tired.',
  'A will is a dead giveaway.',
  'Time flies like an arrow; fruit flies like a banana.',
  'A backward poet writes inverse.',
  'In a democracy it’s your vote that counts; in feudalism, it’s your Count that votes.',
  'A chicken crossing the road: poultry in motion.',
  'If you don’t pay your exorcist you can get repossessed.',
  'With her marriage she got a new name and a dress.',
  'Show me a piano falling down a mine shaft and I’ll show you A-flat miner.',
  'When a clock is hungry it goes back four seconds.',
  'The guy who fell onto an upholstery machine was fully recovered.',
  'A grenade fell onto a kitchen floor in France and resulted in Linoleum Blownapart.',
  'You are stuck with your debt if you can’t budge it.',
  'Local Area Network in Australia : The LAN down under.',
  'He broke into song because he couldn’t find the key.',
  'A calendar’s days are numbered.',
];

function randomMessage() {
  return messages[(Math.random() * messages.length) | 0];
}

function appendChild() {
  let msg = document.createElement('div');
  msg.className = 'message';
  msg.innerText = randomMessage();
  scroller.insertBefore(msg, anchor);
}
setInterval(appendChild, 1000);

html {
  height: 100%;
  display: flex;
}

body {
  min-height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 0;
}

#scroller {
  flex: 2;
}

#scroller * {
  overflow-anchor: none;
}

.new-message {
  position: sticky;
  bottom: 0;
  background-color: blue;
  padding: .2rem;
}

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

body {
  background-color: #7FDBFF;
}

.message {
  padding: 0.5em;
  border-radius: 1em;
  margin: 0.5em;
  background-color: white;
}

<div id="scroller">
  <div id="anchor"></div>
</div>

<div class="new-message">
  <input type="text" placeholder="New Message">
</div>

স্নিপেট প্রসারিত করুন

এটি মোবাইলে খুলুন: https://cdpn.io/chasebank/debug/PowxdOR

এটি যা করছে তা হ'ল নতুন বার্তা উপাদানগুলির কোনও ডিফল্ট অ্যাঙ্করিং অক্ষম করে #scroller * { overflow-anchor: none }

এবং পরিবর্তে একটি খালি উপাদান নোঙ্গর করা #anchor { overflow-anchor: auto }যা সেই নতুন বার্তাগুলির পরে সর্বদা আসবে, যেহেতু নতুন বার্তাগুলি এর আগে sertedোকানো হচ্ছে ।

অ্যাঙ্করিংয়ের পরিবর্তনটি লক্ষ্য করার জন্য একটি স্ক্রোল থাকতে হবে যা আমি মনে করি সাধারণত ইউএক্স ভাল good তবে যে কোনও উপায়েই, কীবোর্ডটি খোলার পরে বর্তমান স্ক্রোলের অবস্থানটি বজায় রাখা উচিত।

— পশ্চাদ্ধাবন
সূত্র

আমার সমাধান শর্তাধীন চেক যুক্ত করার সাথে আপনার প্রস্তাবিত সমাধানের সমান। আমার সমাধানের বর্ণনা এখানে দেওয়া হয়েছে:

গত স্ক্রোল অবস্থানে সংরক্ষণ scrollTopও শেষ clientHeightএর .messagesথেকে oldScrollTopএবং oldHeightযথাক্রমে
আপডেট oldScrollTopএবং oldHeightপ্রত্যেক বার এক একটা resizeঘটে windowএবং আপডেট oldScrollTopপ্রত্যেক বার এক একটা scrollঘটে.messages
কখন windowসঙ্কুচিত হয় (যখন ভার্চুয়াল কীবোর্ড প্রদর্শিত হয়), এর উচ্চতা .messagesস্বয়ংক্রিয়ভাবে প্রত্যাহার করে নেবে । উদ্দেশ্যমূলক আচরণটি হ'ল উচ্চতা প্রত্যাহার করার .messagesপরেও সর্বনিম্ন সামগ্রীটি দৃশ্যমান করে তোলা .messages। এটা আমাদের প্রয়োজন ম্যানুয়ালি স্ক্রোল অবস্থানে সমন্বয় scrollTopএর .messages।
যখন ভার্চুয়াল কীবোর্ড শো, আপডেট scrollTopএর .messagesনিশ্চিত যে নীচেরতম অংশ করতে .messagesআগে তার উচ্চতা প্রত্যাহার ঘটবে এখনও দৃশ্যমান
ভার্চুয়াল কীবোর্ড চামড়া, আপডেট করেন scrollTopএর .messagesনিশ্চিত করতে যে নীচেরতম অংশ .messagesদেহাবশেষ এর নীচেরতম অংশ .messagesউচ্চতা সম্প্রসারণ পর (যদি না সম্প্রসারণ ঊর্ধ্বমুখী ঘটতে পারে না; এই ঘটে যখন আপনি উপরের প্রায় শেষ হয়ে এসেছে .messages)

কী কারণে সমস্যা হয়েছে?

আমার (প্রাথমিক সম্ভবত ত্রুটিপূর্ণ) লজিক্যাল চিন্তা হয়: resizeঘটে, .messagesউপর উচ্চতা পরিবর্তন আপডেট ', .messages scrollTopআমাদের ভিতরে ঘটে resizeইভেন্ট হ্যান্ডলার। যাইহোক, .messages'উচ্চতা সম্প্রসারণের পরে, scrollকৌতূহলজনকভাবে একটি ঘটনা ঘটে যা একটি আগে resize! এবং আরও কৌতূহলজনক, scrollইভেন্টটি কেবল তখনই ঘটে যখন আমরা কীবোর্ডটি লুকিয়ে থাকি scrollTopযখন কখন সরিয়ে নেওয়া .messagesহয় না তার সর্বাধিক মানের উপরে স্ক্রোল করি । আমার ক্ষেত্রে, এর অর্থ এই যে আমি যখন নীচে স্ক্রোল করি 270.334px(সর্বাধিক প্রত্যাহার scrollTopকরার আগে সর্বাধিক .messages) এবং কীবোর্ডটি লুকান, ঘটনাটি ঘটে scrollযাওয়ার আগে অদ্ভুত resizeএবং .messagesঠিক আপনার স্ক্রোল করে 270.334px। এটি স্পষ্টতই আমাদের সমাধানটিকে উপরের দিকে গণ্ডগোল করে।

ভাগ্যক্রমে, আমরা এটি প্রায় কাজ করতে পারেন। ঘটনাটি scrollহওয়ার আগে এটি কেন আমার ব্যক্তিগত ছাড় resizeতা হ'ল কারণ এটি উচ্চতার প্রসারিত হওয়ার পরে উপরের অবস্থানটি .messagesবজায় রাখতে পারে না (এ কারণেই আমি উল্লেখ করেছি যে আমার প্রাথমিক যৌক্তিক চিন্তাভাবনা ত্রুটিযুক্ত; কেবল তার সর্বোচ্চ অবস্থানের উপরে অবস্থান বজায় রাখার উপায় নেই) মান) । অতএব, এটি তত্ক্ষণাত্ এটির সর্বোচ্চ মূল্য দিতে পারে যা এটি দিতে পারে (যা নিঃসন্দেহে, )।scrollTop270.334px.messagesscrollTopscrollTop270.334px

আমরা কি করতে পারি?

যেহেতু আমরা কেবলমাত্র oldHeightআকার পরিবর্তন করে আপডেট করি তাই আমরা পরীক্ষা করতে পারি যে এই বাধ্যতামূলক স্ক্রোলটি (বা আরও সঠিকভাবে resize) ঘটেছিল কিনা এবং যদি তা হয় তবে আপডেট হয় না oldScrollTop(কারণ আমরা ইতিমধ্যে এটি পরিচালনা করেছি resize!) আমাদের কেবল তুলনা করা প্রয়োজন oldHeightএবং বর্তমান উচ্চতা চালু রয়েছে scrollএই জোর করে স্ক্রোলিং ঘটে কিনা তা দেখতে। এটি কাজ করে কারণ oldHeightবর্তমান উচ্চতার সমান না হওয়ার শর্তটি scrollতখনই সত্য হবে যখন resizeঘটবে (যা কাকতালীয়ভাবে যখন জোর করে স্ক্রোলিং ঘটে তখন)।

নীচে কোডটি (জেএসফিডেলে) এখানে দেওয়া হয়েছে :

window.onload = function(e) {
  let messages = document.querySelector('.messages')
  messages.scrollTop = messages.scrollHeight - messages.clientHeight
  bottomScroller(messages);
}


function bottomScroller(scroller) {
  let oldScrollTop = scroller.scrollTop
  let oldHeight = scroller.clientHeight

  scroller.addEventListener('scroll', e => {
    console.log(`Scroll detected:
      old scroll top = ${oldScrollTop},
      old height = ${oldHeight},
      new height = ${scroller.clientHeight},
      new scroll top = ${scroller.scrollTop}`)
    if (oldHeight === scroller.clientHeight)
      oldScrollTop = scroller.scrollTop
  });

  window.addEventListener('resize', e => {
    let newScrollTop = oldScrollTop + oldHeight - scroller.clientHeight

    console.log(`Resize detected:
      old scroll top = ${oldScrollTop},
      old height = ${oldHeight},
      new height = ${scroller.clientHeight},
      new scroll top = ${newScrollTop}`)
    scroller.scrollTop = newScrollTop
    oldScrollTop = newScrollTop
    oldHeight = scroller.clientHeight
  });
}

.container {
  width: 400px;
  height: 87vh;
  border: 1px solid #333;
  display: flex;
  flex-direction: column;
}

.messages {
  overflow-y: auto;
  height: 100%;
}

.send-message {
  width: 100%;
  display: flex;
  flex-direction: column;
}

<div class="container">
  <div class="messages">
    <div class="message">hello 1</div>
    <div class="message">hello 2</div>
    <div class="message">hello 3</div>
    <div class="message">hello 4</div>
    <div class="message">hello 5</div>
    <div class="message">hello 6 </div>
    <div class="message">hello 7</div>
    <div class="message">hello 8</div>
    <div class="message">hello 9</div>
    <div class="message">hello 10</div>
    <div class="message">hello 11</div>
    <div class="message">hello 12</div>
    <div class="message">hello 13</div>
    <div class="message">hello 14</div>
    <div class="message">hello 15</div>
    <div class="message">hello 16</div>
    <div class="message">hello 17</div>
    <div class="message">hello 18</div>
    <div class="message">hello 19</div>
    <div class="message">hello 20</div>
    <div class="message">hello 21</div>
    <div class="message">hello 22</div>
    <div class="message">hello 23</div>
    <div class="message">hello 24</div>
    <div class="message">hello 25</div>
    <div class="message">hello 26</div>
    <div class="message">hello 27</div>
    <div class="message">hello 28</div>
    <div class="message">hello 29</div>
    <div class="message">hello 30</div>
    <div class="message">hello 31</div>
    <div class="message">hello 32</div>
    <div class="message">hello 33</div>
    <div class="message">hello 34</div>
    <div class="message">hello 35</div>
    <div class="message">hello 36</div>
    <div class="message">hello 37</div>
    <div class="message">hello 38</div>
    <div class="message">hello 39</div>
  </div>
  <div class="send-message">
    <input />
  </div>
</div>

স্নিপেট প্রসারিত করুন

মোবাইলের জন্য ফায়ারফক্স এবং ক্রোমে পরীক্ষিত এবং এটি উভয় ব্রাউজারের জন্যই কাজ করে।

— রিচার্ড
সূত্র