ডিভের নীচে স্ক্রোল করবেন?

Question

আমি রেলগুলিতে এজাক্স অনুরোধ ব্যবহার করে একটি চ্যাট তৈরি করছি এবং আমি অনেক ভাগ্য ছাড়াই নীচে স্ক্রোল করতে একটি ডিভ নেওয়ার চেষ্টা করছি।

আমি এই ডিভের মধ্যে সমস্ত কিছু মোড়ানো করছি:

#scroll {
    height:400px;
    overflow:scroll;
}

জেএস ব্যবহার করে ডিফল্টরূপে এটিকে নীচে স্ক্রোল করার কোনও উপায় আছে কি?

এজ্যাক্স অনুরোধের পরে এটিকে নীচে স্ক্রোল করার কোনও উপায় আছে কি?

Answer 1

আমি আমার সাইটে যা ব্যবহার করি তা এখানে:

var objDiv = document.getElementById("your_div");
objDiv.scrollTop = objDiv.scrollHeight;

Comments

এই পদ্ধতিটি কি সমস্ত ব্রাউজারের সাথে ঠিক আছে?

— jondinham

@ পলডিনহ: আমি কেবল এটি খতিয়ে দেখলাম এবং আই 7 and এবং নিম্নের স্ক্রোলহাইট ব্যবহার করে একটি সমস্যা রয়েছে। সেখানে IE7 জন্য কাজ প্রায় হবে বলে মনে হচ্ছে না এখানে ।

— শান

এটি ডিভের অভ্যন্তরে গতিশীল উপাদান যুক্ত করার পরে কেন কাজ করে না?

— ভিনস

@ ভিনস - এটি এককালীন চুক্তি। আপনি যদি সামগ্রীটি পরিবর্তন করেন তবে আপনাকে পুনরায় সম্পাদন করতে হবে। কমান্ডটি মূলত "স্ক্রোল বারকে এই অবস্থানে নিয়ে যান" বলে।

— DrFriedParts

এবং অতিরিক্ত হিসাবে, যদি আপনার উদাহরণস্বরূপ কোনও ডিভের অভ্যন্তরে উপাদান থাকে তবে আপনি কোনও নির্দিষ্ট উপাদানটিকে দর্শন হিসাবে স্ক্রোল করতে পারেন। (অর্থাত্ প্যারেন্ট ডিভের ভিতরে উপাদানটি দৃশ্যমান)

— নেটফিড

Answer 2

আপনি jQuery স্ক্রোলটপ ব্যবহার করছেন তবে এটি অনেক সহজ :

$("#mydiv").scrollTop($("#mydiv")[0].scrollHeight);

Comments

এটা কিভাবে সহজ?

— অধিনায়কস্পি

2 এর পরিবর্তে 1 লাইন? কোনও ক্লু নেই, তবে আপনি JQuery এর সাহায্যে যা সহজেই করতে পারেন তা হ'ল এই জাতীয় ক্রিয়াটি হ'ল: $ ("# ডিভি-আইডি") an ); আশা করি এটি যে কাউকে সাহায্য করবে :)

— স্যামুয়েল

স্ক্রোলহাইট পেতে jquery উপাদান থেকে ডোম উপাদান পেতে আপনার [0] প্রয়োজন

— জিমি বোস

"জিকিউ উল্লেখ না করে পড়া / বোঝা শক্ত!" খাঁটি মতামত। উদাহরণস্বরূপ আমি জিকুয়েরি পড়তে, বুঝতে এবং এর সাথে স্টাফ করা অনেক সহজ করি। আপনি যদি ইতিমধ্যে JQuery ব্যবহার করেন তবে এই সমাধানটি আরও ভাল।

— হান্না

নিজেকে পুনরাবৃত্তি না করে:$("#mydiv").scrollTop(function() { return this.scrollHeight; });

— এরিক

Answer 3

আপনি নিম্নলিখিত কোড ব্যবহার করতে পারেন:

function scrollToBottom(id){
   var div = document.getElementById(id);
   div.scrollTop = div.scrollHeight - div.clientHeight;
}

জিকুয়েরির সাথে একটি মসৃণ স্ক্রোল সম্পাদন করতে :

function scrollSmoothToBottom (id) {
   var div = document.getElementById(id);
   $('#' + id).animate({
      scrollTop: div.scrollHeight - div.clientHeight
   }, 500);
}

দেখুন উদাহরণস্বরূপ উপর JSFiddle

এবং এটি কিভাবে এটি কাজ করে:

রেফারেন্স: স্ক্রোলটপ , স্ক্রোলহাইট , ক্লায়েন্টহাইট

Answer 4

jQuery অ্যানিমেট ব্যবহার করে :

$('#DebugContainer').stop().animate({
  scrollTop: $('#DebugContainer')[0].scrollHeight
}, 800);

Comments

স্যাম এই মন্তব্যটিতে যা বলেছেন তা-ও । এটি সম্ভবত একটি বাস্তব উত্তরে আরও বেশি কার্যকর!

— কোয়ান্টিন প্রদেট

এই উত্তরটি কীভাবে .stop () ব্যবহার করে তা লক্ষ্য করুন , যা একাধিক অ্যানিমেশন সহ সমস্যাগুলি প্রতিরোধ করে।

— kalyfe

আশ্চর্যের বিষয় হল এর আগে থাকা সমস্ত প্রতিক্রিয়া থেকে আমার পক্ষে এটিই কাজ করে। এটি হতে পারে যে কীভাবে আমার অন্যান্য

— ডিভগুলি

এই একমাত্র আমার জন্য কাজ করেছিল (আমি চিত্রগুলি যোগ করছি, পাঠ্য নয়)

— জন কোটজিক

Answer 5

var mydiv = $("#scroll");
mydiv.scrollTop(mydiv.prop("scrollHeight"));

JQuery 1.6 থেকে কাজ করে

https://api.jquery.com/scrollTop/

http://api.jquery.com/prop/

Comments

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

— সিএফৎজ

Answer 6

নতুন পদ্ধতি যা সমস্ত বর্তমান ব্রাউজারগুলিতে কাজ করে :

this.scrollIntoView(false);

Comments

মনে করুন এটি কেবল ফায়ারফক্সে কাজ করে: developer.mozilla.org/en/docs/Web/API/Element/…

— অমৃত কাহলন

সমর্থনটিতে সত্যিকার অর্থেই অভাব রয়েছে, তবে এটি যদি স্বীকৃত হয় তবে তা দুর্দান্ত।

— ক্রিস্টজান লিভা

কোন আপডেট? আমি মনে করি এটি ভাল উত্তর হিসাবে গ্রহণ করা উচিত। মানে jQuery এ এসেছি?

— lkahtz

कार्यरत: ডকুমেন্ট.কোয়ারী নির্বাচনকারী ("। এমডিএল-তালিকা") sc

— জোহান মদিনা

Answer 7

জাভাস্ক্রিপ্ট সহ মসৃণ স্ক্রোল:

document.getElementById('messages').scrollIntoView({ behavior: 'smooth', block: 'end' });

Answer 8

আপনি যদি নির্ভর করতে না চান scrollHeightতবে নিম্নলিখিত কোডটি সহায়তা করে:

$('#scroll').scrollTop(1000000);

Comments

আপনার সহ উপরের সমাধানগুলির কোনওটি অ্যান্ড্রয়েডে ফায়ারফক্সে কাজ করছে বলে মনে হচ্ছে না ... কোনও চিন্তা দয়া করে?

— কেয়া টোস্ট

কিছু মনে করবেন না, আমি খুব বেশি সংখ্যক ( 1E10) ব্যবহার করছিলাম । একটি অল্প সংখ্যক কাজ করে

— অ্যান্ড্রুটবার

এটি সর্বদা গুরুত্বপূর্ণ

— বেন টালিডিয়োরোস

কেন এটি খারাপ অভিনয় হবে? এটি প্রতিটি পিক্সেলের উপর দিয়ে পুনরাবৃত্তি হওয়ার মতো নয়। এখন খারাপ অনুশীলন আরেকটি প্রশ্ন ...

— ডিভাইস 1

'(' # স্ক্রোল ')। স্ক্রোলটপ (ইনফিনিটি), এটি তখনও কাজ করা উচিত।

— মাধব পাদেল

Answer 9

JQuery ব্যবহার করে, স্ক্রোলটপ কোনও প্রদত্ত উপাদানগুলির জন্য স্কলবারের উল্লম্ব অবস্থান নির্ধারণ করতে ব্যবহৃত হয়। অ্যানিমেশন এবং বিভিন্ন বিকল্প ( ডেমোস ) সহ স্ক্রোল করতে ব্যবহৃত একটি দুর্দান্ত জ্যাকোয়ারি স্ক্রোলটো প্লাগইনও রয়েছে

var myDiv = $("#div_id").get(0);
myDiv.scrollTop = myDiv.scrollHeight;

যদি আপনি নীচে স্ক্রোল করার সময় অ্যানিমেশন যোগ করতে jQuery এর অ্যানিমেট পদ্ধতিটি ব্যবহার করতে চান তবে নীচের স্নিপেটটি দেখুন:

var myDiv = $("#div_id").get(0);
myDiv.animate({
    scrollTop: myDiv.scrollHeight
  }, 500);

Answer 10

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

এটি ব্যবহার করে Mutation Observers( https://developer.mozilla.org/en-US/docs/Web/API/ রূপান্তরঅবসার্ভার ) যা এটি কেবল আধুনিক ব্রাউজারগুলিতে ব্যবহারযোগ্য করে তোলে (যদিও পলিফিল বিদ্যমান)

সুতরাং মূলত কোডটি কেবল এটি করে:

var scrollContainer = document.getElementById("myId");

// Define the Mutation Observer
var observer = new MutationObserver(function(mutations) {

  // Compute sum of the heights of added Nodes
  var newNodesHeight = mutations.reduce(function(sum, mutation) {
      return sum + [].slice.call(mutation.addedNodes)
        .map(function (node) { return node.scrollHeight || 0; })
        .reduce(function(sum, height) {return sum + height});
  }, 0);

  // Scroll to bottom if it was already scrolled to bottom
  if (scrollContainer.clientHeight + scrollContainer.scrollTop + newNodesHeight + 10 >= scrollContainer.scrollHeight) {
    scrollContainer.scrollTop = scrollContainer.scrollHeight;
  }

});

// Observe the DOM Element
observer.observe(scrollContainer, {childList: true});

আমি ধারণাটি প্রদর্শনের জন্য একটি বেহালতা তৈরি করেছি: https://jsfiddle.net/j17r4bnk/

Comments

কিভাবে ডায়নামিক আইডি পাবেন? মত <div class="abc"><div data-bind=attr : {'id': myId } ></div></div>এই কোড ইন myId একটি পরিবর্তনশীল। আমি স্ক্রিপ্টে এই আইডিটি কীভাবে অ্যাক্সেস করতে পারি।

— ইরফান ইউসানিফ

আমি আপনার প্রশ্নটি বুঝতে পেরেছি তা নিশ্চিত নয়। আমার উদাহরণে, "মাইআইডি" হ'ল স্ক্রোল ধারকটির আইডি। আপনি কি একাধিক অঞ্চল তৈরি করতে চান যেখানে ব্যবহারকারী স্ক্রোল করতে পারে?

— বেনকিনাস

Answer 11

জাভাস্ক্রিপ্ট বা jquery:

var scroll = document.getElementById('messages');
   scroll.scrollTop = scroll.scrollHeight;
   scroll.animate({scrollTop: scroll.scrollHeight});

CSS:

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

Answer 12

এটি সত্যিই সহায়ক বলে মনে হয়েছে, আপনাকে ধন্যবাদ।

কৌণিক 1.X লোকের জন্য এখানে আছে:

angular.module('myApp').controller('myController', ['$scope', '$document',
  function($scope, $document) {

    var overflowScrollElement = $document[0].getElementById('your_overflow_scroll_div');
    overflowScrollElement[0].scrollTop = overflowScrollElement[0].scrollHeight;

  }
]);

কেবলমাত্র এইচটিএমএল ডিওএম উপাদানগুলির তুলনায় জিকুয়েরি উপাদানগুলিতে মোড়ানো কৌণিকর সাথে কিছুটা বিভ্রান্ত হয়।

চ্যাটের অ্যাপ্লিকেশনের জন্যও, আপনার চ্যাটগুলি কার্যকর হওয়ার জন্য লোড করার পরে আমি এই কার্যনির্বাহীকরণটি করতে পেলাম, আপনাকে খুব অল্প সময়ের মধ্যেও চড় মারতে হবে।

Answer 13

ছোট সংযোজন: কেবলমাত্র স্ক্রলগুলি যদি শেষ লাইনটি ইতিমধ্যে দৃশ্যমান হয়। যদি একটি সামান্য বিট স্ক্রল করা হয়, সামগ্রীটি যেখানে রয়েছে সেখানে ফেলে রাখুন (মনোযোগ: বিভিন্ন ফন্টের আকারের সাথে পরীক্ষা করা হয়নি this "> = তুলনা" এর ভিতরে এটিতে কিছু সামঞ্জস্যের প্রয়োজন হতে পারে):

var objDiv = document.getElementById(id);
var doScroll=objDiv.scrollTop>=(objDiv.scrollHeight-objDiv.clientHeight);                   

// add new content to div
$('#' + id ).append("new line at end<br>"); // this is jquery!

// doScroll is true, if we the bottom line is already visible
if( doScroll) objDiv.scrollTop = objDiv.scrollHeight;

Answer 14

ঠিক যেমন একটি বোনাস স্নিপেট। আমি কৌনিক ব্যবহার করছি এবং যখন কোনও ব্যবহারকারী ব্যবহারকারীদের সাথে বিভিন্ন কথোপকথন নির্বাচন করেছেন তখন নীচে একটি বার্তা থ্রেড স্ক্রোল করার চেষ্টা করছিলাম। বার্তাগুলির জন্য এনজি-রিপিট দিয়ে নতুন ডেটা ডিভ-এ লোড হয়ে যাওয়ার পরে স্ক্রোলটি কাজ করে তা নিশ্চিত করার জন্য, কেবল একটি সময়সীমাতে স্ক্রোল স্নিপেটটি মোড়ক করুন।

$timeout(function(){
    var messageThread = document.getElementById('message-thread-div-id');
    messageThread.scrollTop = messageThread.scrollHeight;
},0)

এটি নিশ্চিত করবে যে ডিওমে inোকানোর পরে স্ক্রোল ইভেন্টটি বরখাস্ত করা হয়েছে।

Comments

আমি সন্দেহ করি $ সুযোগ। $ প্রয়োগ (কলব্যাক) পাশাপাশি কাজ করবে এই দৃষ্টিভঙ্গিকে ডাইজেস্ট এবং পুনরায় মূল্যায়ন করতে বাধ্য করবে।

— এসএসটানলে

ধন্যবাদ! আমি সত্যিই ভাবছিলাম কেন আমি এটি কাজ করতে পারি না এবং the সময়সীমাটি ছিল বিষয়টি।

— ওয়েইফার

@ ওয়াইফার একইsetTimeout(function() { ... }, n)

— কিংরাডার

Answer 15

আপনি jQuery ব্যবহার html,bodyকরে নথির সাথে একটি অ্যানিমেশনও এর মাধ্যমে সংযুক্ত করতে পারেন :

$("html,body").animate({scrollTop:$("#div-id")[0].offsetTop}, 1000);

যার ফলে "ডিভি-আইডি" আইডির সাথে ডিভের শীর্ষে একটি মসৃণ স্ক্রোল আসবে।

Answer 16

জাভা স্ক্রিপ্ট:

document.getElementById('messages').scrollIntoView(false);

উপস্থিত সামগ্রীর শেষ লাইনে স্ক্রোলগুলি।

Answer 17

এটি আপনাকে ডকুমেন্টের উচ্চতার সাথে সম্পর্কিত করে সমস্ত উপায়ে স্ক্রোল করতে দেবে

$('html, body').animate({scrollTop:$(document).height()}, 1000);

Answer 18

এটির একটি খুব সহজ পদ্ধতি হল scroll toডিভের উচ্চতা নির্ধারণ করা ।

var myDiv = document.getElementById("myDiv");
window.scrollTo(0, myDiv.innerHeight);

Answer 19

ডিভের ভিতরে শেষ উপাদানটিতে স্ক্রোল করুন:

myDiv.scrollTop = myDiv.lastChild.offsetTop

Answer 20

আমার কৌণিক 6 অ্যাপ্লিকেশনটিতে আমি কেবল এটি করেছি:

postMessage() {
  // post functions here
  let history = document.getElementById('history')
  let interval    
  interval = setInterval(function() {
    history.scrollTop = history.scrollHeight
    clearInterval(interval)
  }, 1)
}

ম্যানুয়াল স্ক্রোল উপরে / নীচে অনুমতি দেওয়ার জন্য ক্লিয়ারআইন্টারওয়াল (অন্তর) ফাংশন টাইমারটি থামিয়ে দেবে।

Answer 21

আমার পরিস্থিতি: আমার কাছে স্ট্রিংয়ের একটি তালিকা ছিল, যাতে আমাকে ব্যবহারকারীর দেওয়া স্ট্রিং যুক্ত করতে হবে এবং স্বয়ংক্রিয়ভাবে তালিকার শেষে স্ক্রোল করতে হয়েছিল। আমার তালিকার প্রদর্শনটির উচ্চতা স্থির ছিল, এরপরে এটি উপচে পড়া উচিত।

আমি জেরেমি রুটেনের উত্তরটি চেষ্টা করেছি, এটি কার্যকর হয়েছে তবে এটি (এন -১) তম উপাদানটিতে স্ক্রোল করছে। যদি কেউ এই ধরণের সমস্যার মুখোমুখি হন তবে আপনি setTimeOut()পদ্ধতিটি সম্পূর্ণভাবে ব্যবহার করতে পারেন । আপনাকে নীচে কোডটি পরিবর্তন করতে হবে:

setTimeout(() => {
    var objDiv = document.getElementById('div_id');
    objDiv.scrollTop = objDiv.scrollHeight
}, 0)

এখানে আমি তৈরি করা স্ট্যাকাকলিটজ লিঙ্কটি যা সমস্যা এবং এর সমাধান দেখায়: https://stackblitz.com/edit/angular-ivy-x9esw8

Answer 22

আমি জানি এটি একটি পুরানো প্রশ্ন, তবে এই সমাধানগুলির কোনওোটাই আমার পক্ষে কার্যকর হয়নি। কাঙ্ক্ষিত ফলাফল পেতে আমি অফসেট () টিপ ব্যবহার করে শেষ করেছি। আমার চ্যাট অ্যাপ্লিকেশনটির শেষ বার্তায় আমি স্ক্রিনটি আলতো করে স্ক্রোল করতে যা করেছি তা এখানে :

$("#html, body").stop().animate({
     scrollTop: $("#last-message").offset().top
}, 2000);

আমি আশা করি এটি অন্য কাউকে সহায়তা করে।

Answer 23

কখনও কখনও সর্বাধিক সহজ হ'ল সর্বোত্তম সমাধান: আমি জানি না এটি সাহায্য করবে কিনা, এটি আমাকে স্ক্রোল করতে সাহায্য করেছিল যখন আমিও চেয়েছিলাম। "Y =" উচ্চতর, এটি আরও নিচে স্ক্রল হয় এবং অবশ্যই "0" এর শীর্ষটি শীর্ষে থাকে, সুতরাং উদাহরণস্বরূপ "1000" নীচে হতে পারে, বা "2000" বা "3000" এবং আরও কতক্ষণ আপনার নির্ভর করে পৃষ্ঠা হয়। এটি সাধারণত অনক্লিক বা অনমোভারওভার সহ একটি বোতামে কাজ করে।

window.scrollTo(x=0,y=150);

Answer 24

উপাদানটির মোট উচ্চতা হতে স্ক্রোলযোগ্য উপাদানটির শীর্ষ থেকে দূরত্ব নির্ধারণ করুন।

const element = this.shadowRoot.getElementById('my-scrollable-div')
element.scrollTop = element.scrollHeight

Comments

যদি ইতিমধ্যে বিদ্যমান থাকে তবে একই সমাধান যুক্ত করবেন না।

— আসন

হ্যাঁ এটি করবেন না যদি সমাধান ইতিমধ্যে বিদ্যমান থাকে

— ওসওয়াল্ডো

Answer 25

আপনি এইচটিএমএল ডিওএম স্ক্রোলআইটোভিউ পদ্ধতিটি ব্যবহার করতে পারেন:

var element = document.getElementById("scroll");
element.scrollIntoView();

Answer 26

ব্যবহার:

var element= $('element');
var maxScrollTop = element[0].scrollHeight - element.outerHeight();
element.scrollTop(maxScrollTop);

বা নীচে স্ক্রোল চেক করুন:

    var element = $(element);
    var maxScrollTop = element[0].scrollHeight - element.outerHeight();
    element.on('scroll', function() {
        if ( element.scrollTop() >= maxScrollTop ) {
            alert('scroll to bottom');
        }
    });

Comments

স্ক্রোলটপম্যাক্সকে var ম্যাক্সক্রোলটপ = এলিমেন্টে পরিবর্তন করুন [0]। স্ক্রোলহাইট - এলিমেন্ট.উটারহাইট ();

— মাহদি বাঘেরি

Answer 27

এটি যদি চ্যাট উইন্ডোর নীচে স্ক্রোল করার জন্য করা হয় তবে নিম্নলিখিতটি করুন

চ্যাটে কোনও নির্দিষ্ট ডিভ-এ স্ক্রোল করার ধারণাটি নিম্নলিখিত ছিল

1) ব্যক্তি, সময় এবং বার্তা নিয়ে গঠিত প্রতিটি চ্যাট ডিভ ক্লাস চ্যাটকন্টেন্টবক্সের সাথে লুপের জন্য চালানো হয়

2) ক্যোয়ারী নির্বাচনকারী সমস্ত এই জাতীয় অ্যারের সন্ধান করে। এটি 400 নোড (400 চ্যাট) হতে পারে

3) সর্বশেষে যান

4) স্ক্রোলইন্টো ভিউ ()

let lastChatBox = document.querySelectorAll('.chatContentBox'); 
lastChatBox = lastChatBox[lastChatBox.length-1]; 
lastChatBox.scrollIntoView(); 

Comments

বেশ কয়েকটি উত্তর ইতিমধ্যে দেওয়া হয়েছে, ব্যবহার করে scrollIntoView, সুতরাং আর একটি যুক্ত করার প্রয়োজন নেই।

— আসন