ব্যবহারকারী স্ক্রল না করা পর্যন্ত ওভারফ্লো ডিভটিকে নীচে স্ক্রল করুন

Question

আমার একটি ডিভি রয়েছে যা মাত্র 300 পিক্সেল বড় এবং পৃষ্ঠাটি যখন লোড হয়ে যায় তখন আমি এটি চাই content এই ডিভটিতে বিষয়বস্তুটি গতিশীলভাবে যুক্ত হয়েছে এবং সমস্তভাবে নীচে স্ক্রোল থাকা দরকার। এখন যদি ব্যবহারকারী স্ক্রোল আপ করার সিদ্ধান্ত নেয় তবে আমি চাই না যে ব্যবহারকারীটি পুরোপুরি আবার নীচে স্ক্রোল না হওয়া পর্যন্ত এটি নীচে ফিরে যেতে চাই না until

ব্যবহারকারী কি স্ক্রোল না করা এবং ব্যবহারকারী যখন নীচে ফিরে স্ক্রোল না করে তবে নতুন গতিশীল সামগ্রী যুক্ত হওয়া সত্ত্বেও নিজেকে নীচে রাখতে হবে এমন একটি ডিভ থাকা কি সম্ভব যা নীচে স্ক্রোল থাকবে। আমি এটি তৈরির পথে কীভাবে যাব।

Comments

সিএসএস পজিশন ব্যবহার করুন এটি নীচে রাখুন {position : relative; bottom:0;}। ব্যবহারকারীর স্ক্রোল হয়ে গেলে CSS সম্পত্তিটি সরান।

— TCHdvlp

যেহেতু আপনি কোনও উত্তর গ্রহণ করেননি, তাই আমি জিজ্ঞাসা করতে চাই: এটি কি আপনার পক্ষে কাজ করেছে?

— মিঃ ম্যানহাটন

আপনি যে চ্যাটবাক্সটি সম্পাদন করতে চান তার মত শোনাচ্ছে

— থাইলুসিয়াস

এই প্রশ্নের নতুন জন্য, 2020 সালে সিএসএস স্ন্যাপ চেষ্টা করা উচিত ।

— ওয়েইনার

Answer 1

এটি আপনাকে সাহায্য করতে পারে:

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

[সম্পাদনা], মন্তব্যটির সাথে মেলে ...

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

এটি পৃষ্ঠার লোডের নীচে এটিকে ভালভাবে স্ক্রোল করে, তবে ব্যবহারকারী যখন স্ক্রল না করে ডায়নামিক সামগ্রী যুক্ত হয় তখন আমার তলদেশে থাকা দরকার need

— রবার্ট ই। ম্যাকআইনটোস

যতদূর আমি এটি বলতে পারি যখন ব্যবহারকারী নীচে ফিরে স্ক্রোল করে তখন এই গতিশীল স্ক্রোলিংটিকে পুনরায় সক্ষম করে না ...

— TvE

@ টিভি এটি কি আমাদের সমর্থন যোগ করতে পারে না?

— বার্কর্ম্ন 01

খারাপ সমাধান। setIntervalএই হালকা সমস্যার জন্য একটি যুক্ত করার কোনও কারণ নেই ।

— মিথ্যাবাদী

@ মিথ্যাবাদী ক্রেস্ট, আপনি কোনও বিকল্প প্রস্তাব না ... শ্রাগ।

— জ্যারেট লয়েড

Answer 2

আমি কেবল সিএসএসের সাথে এটির কাজ করতে সক্ষম হয়েছি।

কৌশলটি ব্যবহার করা হয় display: flex;এবংflex-direction: column-reverse;

ব্রাউজার নীচের অংশটিকে তার শীর্ষের মতো আচরণ করে। আপনি ব্রাউজারগুলিকে সমর্থন লক্ষ্য করছেন তা ধরে flex-boxনিলে, একমাত্র সতর্কতা হ'ল মার্কআপটি বিপরীত ক্রমে থাকতে হবে।

এখানে একটি কাজের উদাহরণ। https://codepen.io/jimbol/pen/YVJzBg

Comments

অতিরিক্ত র‌্যাপার যুক্ত করে এবং overflow:auto; display:flex; flex-direction:column-reverse;অভ্যন্তরীণ মোড়কের পরিবর্তে বাইরের র‌্যাপারটিতে আবেদন করে আপনি সামগ্রীটি উল্টানোর প্রয়োজনীয়তা অর্জন করতে পারেন ।

— নাথন আর্থার

সম্ভবত সেরা সমাধান কারণ এটি জাভাস্ক্রিপ্ট প্রয়োজন হয় না।

— অমিত কুমার খারে

@ নাথান আর্থার ইউ দা রিয়েল এমভিপি

— 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 শীর্ষ এবং সর্বাধিক হ'ল উপাদান উচ্চতার নিজেই বিয়োগ বিয়োগের স্ক্রোলহাইট। স্ক্রোলবারটি ব্যবহার করার সময় সমস্ত দিক থেকে নীচে অবধি স্ক্রোলবারটি পাওয়া আমার পক্ষে ক্রোম ছিল (এটি আমার পক্ষে ক্রোমে ছিল) be সুতরাং আমি 1px অকার্যকরতা ফেলেছি। তাই isScrolledToBottomসত্য হতে হবে, এমনকি যদি স্ক্রলবার নিচ থেকে 1px হয়। আপনার কাছে যা ঠিক মনে হয় তা সেট করতে পারেন।

তারপরে এটি কেবল নীচের অংশে স্ক্রোলটপ সেট করার বিষয়টি।

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

আপনার ধারণাটি দেখানোর জন্য আমি একটি বেড়া তৈরি করেছি: http://jsfiddle.net/dotnetCarpenter/KpM5j/

সম্পাদনা করুন: যোগ করা হয়েছে কোড স্নিপেট নির্মল যখন 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

এটি প্রকৃতপক্ষে একমাত্র সমাধান যা বর্ণিত প্রশ্নটি পূরণ করে। এবং সঠিক উত্তর হিসাবে চিহ্নিত করা উচিত ছিল।

— preezzzy

@ ডটনেট কার্পেন্টার: এটি আপনার কাছে এমন মনে হচ্ছে যেন আপনার প্রয়োজন if(!isScrolledToBottom): পরীক্ষাটি আমার কাছে ভুল দেখায় (এবং আমি আমার কোড স্থির না করা পর্যন্ত আমার কাজ করে না )।

— লুস্কোটার

@ ব্লকওয়াটার আপনি কি আপনার ফিক্সের সাথে একটি ফিসফিল্ড সরবরাহ করতে পারেন? আমি বিষয়টি নিয়ে বুঝতে পারি না out.scrollHeight - out.clientHeight <= out.scrollTop + 1। আপনি কি নিজের সিএসএসে প্যাডিং ব্যবহার করছেন?

— dotnetCarpenter

এই আমি খুঁজছিলাম ছিল। এবং, ওপি জিজ্ঞাসা করা প্রশ্নের উত্তর এটি। ধন্যবাদ ডটনেট কার্পেটার

— লুইস মেনজিভার

যে কেউ 0 পেয়ে হয়, তাহলে যখন তারা scrollTop কল, আমি ব্যবহার করার পরামর্শ দিই document.getScrollingElementএখানে প্রস্তাবিত: stackoverflow.com/questions/36227559/scrolltop-always-returns-0/...

— ডেনমার্কের অধিবাসী জর্ডান

Answer 4

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

লাইভ ডেমো: http://jsfiddle.net/KGfG2/

Comments

এটি পৃষ্ঠার লোডের নীচে এটিকে ভালভাবে স্ক্রোল করে, তবে ব্যবহারকারী যখন স্ক্রল না করে ডায়নামিক সামগ্রী যুক্ত হয় তখন আমার তলদেশে থাকা দরকার need

— রবার্ট ই। ম্যাকআইনটোস

এটি পুরোপুরি কাজ করে। আমি গতিশীল সামগ্রী দিয়ে আপডেট করছি এবং স্ক্রোলটি সর্বদা নীচে থাকে।

— অ্যান্ডি বাজকা

Answer 5

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

Or animated:

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

Comments

এটি পৃষ্ঠার লোডের নীচে এটিকে ভালভাবে স্ক্রোল করে, তবে ব্যবহারকারী যখন স্ক্রল না করে ডায়নামিক সামগ্রী যুক্ত হয় তখন আমার তলদেশে থাকা দরকার need

— রবার্ট ই। ম্যাকআইনটোস

প্রথম শটে যখন ডিভ অনেক বেড়ে যায় তখন এটি কাজ করে না। উদাহরণস্বরূপ কৌণিক-জে, প্রতিক্রিয়া জে, উল্কা ব্লেজ টেম্পলেট লোডিং এ কাজ করবে না।

— অঙ্কুর সনি

এটি আমার পক্ষে কাজ করেছে। আমি মনে করি যদি প্রশ্নটি ডিভ একটি সামঞ্জস্যপূর্ণ উচ্চতা অবধি চলতে থাকে তবে এটি ঠিক আছে। এটি গতিশীল উচ্চতা দিয়ে পরীক্ষা করা হয়নি।

— doij790

Answer 6

2020 সালে, আপনি সিএসএস স্ন্যাপ ব্যবহার করতে পারেন , তবে ক্রোম 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, সরাসরি প্রভাব দেখুন।

— yisheng wu

রান কোড স্নিপেট বোতামটি আমার কাছে উপস্থিত হয় না। আপনার ফর্ম্যাটিংটি পরীক্ষা করুন

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

এখানে ডটনেট কার্পেন্টার এর উত্তরের ভিত্তিতে আমার সংস্করণ। আমার পদ্ধতির একটি খাঁটি jQuery এবং জিনিসগুলিকে কিছুটা পরিষ্কার করার জন্য আমি ভেরিয়েবলগুলির নামকরণ করেছি .. কি ঘটছে যদি বিষয়বস্তুর উচ্চতা বেশি হয় তবে ধারকটি আমরা কাঙ্ক্ষিত ফলাফল অর্জনের জন্য অতিরিক্ত দূরত্ব নীচে স্ক্রোল করে থাকি।

আইই ও ক্রোমে কাজ করে ..

Answer 10

জিম হলের উত্তরটি পছন্দনীয় কারণ এটি যখন আপনি যখন স্ক্রল আপ করবেন তখন এটি নীচে স্ক্রোল করে না, এটি খাঁটি সিএসএসও।

দুর্ভাগ্যক্রমে তবে, এটি একটি স্থিতিশীল সমাধান নয়: ক্রোমে (সম্ভবত উপরে ডটনেটপার্পেন্টার দ্বারা বর্ণিত 1-px-ইস্যুর কারণে), scrollTopব্যবহারকারীর মিথস্ক্রিয়া ছাড়াই (উপাদান যুক্ত হওয়ার পরে) 1 পিক্সেল দ্বারা ভুল আচরণ করে। আপনি সেট করতে পারেন scrollTop = scrollHeight - clientHeight, তবে এটি ডিভটিকে স্থিতিতে রাখবে যখন অন্য উপাদান যুক্ত করা হয়, ওরফে "নিজেকে নীচে রাখুন" বৈশিষ্ট্যটি আর কাজ করছে না।

সুতরাং, সংক্ষেপে, জাভাস্ক্রিপ্টের একটি অল্প পরিমাণ যুক্ত করা (দীর্ঘশ্বাস) এটি ঠিক করবে এবং সমস্ত প্রয়োজনীয়তা পূরণ করবে:

Https://codepen.io/anon/pen/pdrLEZ এর মতো কিছু (কুলের উদাহরণ দিয়ে), এবং তালিকায় কোনও উপাদান যুক্ত করার পরেও নিম্নলিখিতটি:

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

যেখানে 29 এক লাইনের উচ্চতা।

সুতরাং, যখন ব্যবহারকারী অর্ধেক লাইন উপরে স্ক্রোল করবে (এটি যদি সম্ভব হয় তবে?), জাভাস্ক্রিপ্ট এটিকে উপেক্ষা করে নীচে স্ক্রোল করবে। তবে আমার ধারণা এটি অবহেলিত। এবং এটি Chrome 1 পিক্সেল জিনিসকে ঠিক করে।

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. স্ক্রোলটো এমন একটি পদ্ধতি যা পুরো উইন্ডোটিকে নির্দিষ্ট স্থানাঙ্কিতে স্ক্রোল করে .2

— ইয়াসেশ চৌহান

Answer 13

এখানে আমি এটির কাছে কীভাবে এসেছি। আমার ডিভের উচ্চতা 650px। আমি স্থির করেছিলাম যে যদি স্ক্রোলের উচ্চতা নীচের 150px এর মধ্যে হয় তবে এটি স্বয়ংক্রিয়ভাবে স্ক্রোল করুন। অন্যথায় এটি ব্যবহারকারীর জন্য রেখে দিন।

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