Warning: session_start(): open(/tmp/sess_q2k8v5n2k14gt8ehi3cv752ga1, O_RDWR) failed: No space left on device (28) in /disk2/guru/public_html/qa-include/app/users.php on line 146
[HTML + Javascript] อยากให้ Scrollbar อยู่ในตำแหน่งล่างสุดเสมอ - CITEC-Guru ถามปัญหาคอม เขียนโปรแกรม
พึ่งเคยใช้งานครั้งแรกโปรดอ่านที่นี่! howtouse!
x
  • Register
หางานด้าน IT อยู่เหรอ?

[HTML + Javascript] อยากให้ Scrollbar อยู่ในตำแหน่งล่างสุดเสมอ

+1 vote

สมมติว่ามี

<div id='XXX'></div>


ผมเขียน CSS กำหนด height, width ให้ div xxx เรียบร้อย



และกำหนด overflow:scroll; ด้วย
เพราะต้องการ scrollbar ถ้าข้อมูลเกิน height ที่กำหนดไว้

>>> คำถามคือ <<<
อยากให้ scrollbar อยู่ในตำแหน่งล่างสุดตลอดเวลา

ข้อมูลที่อยู่ใน div XXX เอาไว้แสดงข้อมูล
ดึงด้วย AJAX จาก MySQL
เลยอยากให้มันอยู่ล่างสุดตลอดเวลา

ประมาณว่า ดึงมาได้ 100 row เอามาใส่ใน div id='XXX'
อยากให้ scrollbar เลื่อนลงมาล่างสุด 
เพื่อให้เห็น row ที่ 100 ตลอดเวลา 
 
 
ผมทดลอง เขียน Javascript
 
var objDiv = document.getElementById("XXX");
objDiv.scrollTop = objDiv.scrollHeight;
 
เช็คค่า scrollTop แล้ว ค่ายังเป็น 0 อยู่ และ scroll ยังอยู่ในตำแหน่งเดิมครับผม
.
.
.
ขอบคุณล่วงหน้าครับ
 
 
 
ถามเมื่อ Oct 17, 2012 in Html,Javascript,CSS โดย phanithanj (1,139 คะแนน)
   

2 Answers

+2 votes
 
Best answer

ต้องให้ objDiv.scrollTop เท่ากับ Height ของ content ที่ overflow ครับ
ประมาณว่า

ดู code ดีกว่าครับ
http://jsfiddle.net/nodtem66/S6avs/

ตอบเมื่อ Oct 25, 2012 โดย nodtem66 (218 คะแนน)
selected Nov 23, 2012 โดย phanithanj
ขอบคุณครับ น่าสนใจมาก จะลองศึกษาดูครับ
–1 vote

 

ขอตอบด้วยโค้ดนะครับ
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5 Document</title>
</head>
<body onload="document.getElementById('test').scrollTop=document.getElementById('test').scrollHeight;">
<div id="test" style="width:300px;height:300px;border:1px solid red;overflow:scroll">
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
</div>
</body>
</html>

 

ตอบเมื่อ Oct 20, 2012 โดย เสือ เลิศคณิตกรณ์ (151 คะแนน)
reshown Nov 18, 2012 โดย เสือ เลิศคณิตกรณ์
โหวตลบเพราะ?
ผมคิดว่า คุณคงไม่ได้บอกว่าต้องใช้

    document.getElementById('test').scrollTop=document.getElementById('test').scrollHeight;

เสมอเมื่อมีการปรับปรุงเนื้อหาใน element นั้นๆ น่ะครับ เจ้าของกระทู้คงไม่เข้าใจ
อ่อครับ เช่นนั้นพอเข้าใจ ^_^

Related questions

0 votes
0 คำตอบ
0 votes
4 คำตอบ
+2 votes
1 คำตอบ
...