التمرير فاضت DIVs مع جافا سكريبت

Question

لدي div يستخدم overflow:auto للحفاظ على محتويات داخل div كما هو حجمها و سحب جميع أنحاء الصفحة.أنا باستخدام بعض اياكس لاسترداد أسطر من النص من الخادم ، ثم إلحاق لهم إلى نهاية div لذا المحتوى ينمو إلى أسفل.في كل مرة يحدث هذا, أود أن استخدام JS أن انتقل div إلى أسفل حتى مؤخرا إضافة المحتوى مرئيا, مماثل إلى الطريق غرفة دردشة أو سطر الأوامر وحدة التحكم في العمل.

حتى الآن لقد تم استخدام هذا مقتطف للقيام بذلك (أنا أيضا باستخدام مسج ، وبالتالي $ (وظيفة)):

$("#thediv").scrollTop = $("#thediv").scrollHeight;

ومع انها كانت تعطيني نتائج غير متناسقة.أحيانا يعمل وأحيانا لا ، تماما يتوقف عن العمل إذا كان المستخدم من أي وقت مضى تغيير حجم div أو يتحرك شريط التمرير يدويا.

الهدف متصفح فايرفوكس 3 ، و يتم نشرها في بيئة تسيطر عليها لذلك لا تحتاج إلى أن تعمل في أي في جميع.

أي أفكار الرجال ؟ هذا جعلني الحيرة.وذلك بفضل!

Answer 1

scrollHeight يجب أن يكون ارتفاع إجمالي المحتوى. scrollTop يحدد بكسل تعويض في هذا المحتوى ليتم عرضها في الجزء العلوي من عنصر منطقة العميل.

إذا كنت تريد حقا (لا تزال تستخدم مسج):

$("#thediv").each( function() 
{
   // certain browsers have a bug such that scrollHeight is too small
   // when content does not fill the client area of the element
   var scrollHeight = Math.max(this.scrollHeight, this.clientHeight);
   this.scrollTop = scrollHeight - this.clientHeight;
});

...سوف انتقل الإزاحة إلى الماضي clientHeight يستحق من المحتوى.

Answer 2

scrollIntoView

على scrollIntoView طريقة تمرير عنصر في طريقة العرض.

Answer 3

باستخدام حلقة تكرار عبر مسج من عنصر واحد هو تماما غير فعالة.عند اختيار معرف يمكنك استرداد أول عنصر فريد من مسج باستخدام الحصول على() أو [] التدوين.

var div = $("#thediv")[0];

// certain browsers have a bug such that scrollHeight is too small
// when content does not fill the client area of the element
var scrollHeight = Math.max(div.scrollHeight, div.clientHeight);
div.scrollTop = scrollHeight - div.clientHeight;

Answer 4

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

Answer 5

فإنه يمكن القيام به في سهل JS.الحيلة هي أن مجموعة scrollTop إلى قيمة مساوية أو أكبر من مجموع ارتفاع عنصر (scrollHeight):

const theDiv = document.querySelector('#thediv');
theDiv.scrollTop = Math.pow(10, 10);

من MDN:

إذا تم تعيين إلى قيمة أكبر من الحد الأقصى المتاح العنصر ، scrollTop يستقر نفسها إلى القيمة القصوى.

في حين بلغت قيمة Math.pow(10, 10) لم خدعة باستخدام قيمة عالية جدا مثل Infintiy أو Number.MAX_VALUE سيتم إعادة تعيين إلى scrollTop 0 (فايرفوكس 66).

Answer 6

كان div التفاف 3 divs التي كانت تطفو اليسار و المحتويات التي تم تغيير حجمها.فإنه يساعد على تحويل غير تقليدي بلون الحدود/خلفية عن شعبة-المجمع عند محاولة حل هذه.المشكلة أن حجمها div المحتوى كان يفيض خارج div-المجمع (ونزف إلى أسفل منطقة المحتوى أدناه المجمع).

حلها باستخدام @Shog9 الجواب أعلاه.كما ينطبق على حالتي ، كان هذا تخطيط HTML:

<div id="div-wrapper">
  <div class="left-div"></div>
  <div id="div-content" class="middle-div">
  Some short/sweet content that will be elongated by Jquery.
  </div>
  <div class="right-div"></div>
</div>

هذا هو بلدي مسج تغيير حجم div-المجمع:

<script>
$("#div-content").text("a very long string of text that will overflow beyond the width/height of the div-content");
//now I need to resize the div...
var contentHeight = $('#div-content').prop('scrollHeight')
$("#div-wrapper").height(contentHeight);
</script>

ملاحظة, $('#div-content').دعامة('scrollHeight') ينتج ارتفاع هذا المجمع يحتاج إلى تغيير.أيضا أنا على علم بأي طريقة أخرى للحصول على scrollHeight الفعلي مسج وظيفة ؛ لا من $('#div-content').scrollTop() و $('#div-content').ارتفاع إنتاج المحتوى الحقيقي-ارتفاع القيم.آمل أن يساعد هذا شخص هناك!