javascript - amsterdam - DIV নীচে স্ক্রোল?




json (13)

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

myDiv.scrollTop = myDiv.lastChild.offsetTop

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

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

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

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

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


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

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

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

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

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

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

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

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

একটি মসৃণ স্ক্রোল সঞ্চালন, নিম্নলিখিত কোড ব্যবহার করুন (jQuery প্রয়োজন):

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

JSFiddle উপর নমুনা দেখুন

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

JSFiddle

রেফারেন্স: scrollTop , scrollHeight , clientHeight


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

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

সুতরাং মূলত কোড ঠিক যে করে:

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/


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

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

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


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

সেখানে কৌতুক 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;

  }
]);

এইচটিএমএল DOM উপাদানের বনাম jQuery উপাদানগুলিতে মোড়ানো কারণ কৌণিক সঙ্গে একটু বিভ্রান্তিকর পায়।

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


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

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

যা আইভি "ডিভ-আইডি" আইডি দিয়ে ডিভাইন শীর্ষে একটি মসৃণ স্ক্রোলে পরিনত হবে।


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

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;

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

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

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


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

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

এটি DOM তে তথ্য সন্নিবেশ করার পরে স্ক্রোল ইভেন্টটি বহিস্কার করা হয় তা নিশ্চিত করবে।







ajax