[Javascript] ท่านใดเก่ง javascript รบกวนหน่อย

[iPokz]

ใครพอสามารถที่จะช่วยทำให้

Scroll bar ของเนื้อหาใน Div ที่กำหนดอยู่ตรงตำแหน่งดังนี้ได้

* เริ่มโหลดหน้ามาให้ตำแหน่ง Scroll bar อยู่ด้านล่างสุดของ DIV ที่กำหนด
* ถ้ามีการเปลี่ยนแปลงเนื้อหาใน DIV ให้ตรวจสอบว่า Scroll bar อยู่ที่ตำแหน่งใด
** ถ้าอยู่ที่ตำแหน่งล่างสุดก่อนมีการเปลี่ยนแปลงเนื้อหาก็ให้ Scroll bar อยู่ที่ตำแหน่งล่างสุด
** ถ้าอยู่ที่ตำแหน่งใดๆ ก่อนมีการเปลี่ยนแปลงเนื้อหาก็ให้ Scroll bar อยู่ที่ตำแหน่งนั้นๆ

พอดีผมจะเอามาประยุกต์ใช้งานกับ Chatroom น่ะครับ ไม่รู้ว่า ผมอธิบายไป งงกันตรงไหนป่าว ^^"

ถ้าได้โค้ดที่ใช้งานกับ jQuery ได้ด้วยจะดีมากเลยครับ



ขอบคุณล่วงหน้าครับ

Pok

[iPokz]

มีใครรู้บ้างม่ะฮะ T.T

[cpengineer]

งงครับ 

แต่เข้าใจว่า JQuery ทำได้อยู่แล้วครับ

[kitazawa1st]

เดาว่า ปัญหาหลักอยู่ที่ ไม่รู้ว่าตำแหน่งที่เปลี่ยนแปลงอยู่ตรงไหน ใช่ป่าวหว่า 

เดาเฉยๆ ไม่รู้วิธีแก้ ติดปัญหาตรงนี้แหละ

[medzmay]

function getScrollXY() {
  var scrOfX = 0, scrOfY = 0;
  if( typeof( window.pageYOffset ) == 'number' ) {
    //Netscape compliant
    scrOfY = window.pageYOffset;
    scrOfX = window.pageXOffset;
  } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
    //DOM compliant
    scrOfY = document.body.scrollTop;
    scrOfX = document.body.scrollLeft;
  } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
    //IE6 standards compliant mode
    scrOfY = document.documentElement.scrollTop;
    scrOfX = document.documentElement.scrollLeft;
  }
  return scrOfY;
}

ผมเคยทำ แบบหาว่า scroll ของหน้าต่างอยู่ใหน div ไม่เคยลองเปลี่ยน script ข้างบนจาก object ของ window เป็น object ของ div ดูนะครับ ยังไม่ได้ลองเหมือนกัน

[ball6847]

ก็คือให้มันเลื่อนลงมาข้อความล่างสุดใช่มั้ยครับ


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


jquery ใช้แค่นี้เอง

[iPokz]

ก็คือให้มันเลื่อนลงมาข้อความล่างสุดใช่มั้ยครับ


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


jquery ใช้แค่นี้เอง

อ่ะคับ คือบางที มันมีปัญหาตรงที่ ผู้ใช้งาน จะ เลื่อนไปดูข้อความด้านบน น่ะคับ

ถ้าใช้แบบให้มันอยู่ล่างสุดตลอด เวลาเปลี่ยนแปลงข้อมูล ผู้ใช้ยังอ่านข้อความไม่หมด

มันจะเลื่อนมาตำแหน่งล่างสุดน่ะครับ ...

[ball6847]

อื้ม ยากแฮะ

งั้งก็ต้องตามที่ว่ามาแหละคับ เช็คตำแหน่งก่อน

ถ้าเช็คว่าอยู่ตำแหน่งล่างสุดๆหรือเปล่านี่ยังงัยหว่า

น่าจะเอา height + scrollTop เทียบกับ scrollHeight


เขียนเป็น plugin ก็น่าจะประมาณนี้

$.fn.isScrollBottom = function() {
   return (this[0].scrollTop + this.height()) == this[0].scrollHeight;
};

$.fn.scrollToBottom = function() {
   return this.each(function(){
      $(this).scrollTop(this.scrollHeight);
   });
};

คือมันต้องอยู่ชิดล่างสุดจริงๆนะครับมันถึงจะ return true

ประมาณว่า

//  onBeforeMessageUpdate
var needScrollToBottom = $('#message_container').isScrollBottom();


// onMessageUpdate
if (needScrollToBottom)
{
   $('#message_container').scrollToBottom();
}

[iPokz]

ขอบคุณมากครับ ใช้งานได้แระครับ