Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 109,038

HOME > Client Script Forum > จะทำ div scroll ให้อยู่ล่างสุดตลอด มันทำได้ไหมครับ


[PHP] จะทำ div scroll ให้อยู่ล่างสุดตลอด มันทำได้ไหมครับ

 
Topic : 109363



โพสกระทู้ ( 216 )
บทความ ( 1 )



สถานะออฟไลน์
Twitter Facebook Blogger


คือผมลองศึกษาดูแล้วมันน่าจะทำได้ ผมลองแกะจาก https://www.thaicreate.com/tutorial/ajax-chat-room.html ได้
Code (JavaScript)
view source
print?
1.var el = document.getElementById('mydiv');
2.el.tabIndex = 32456;
3.el.focus();


ตามนี้อะครับ แต่พอลองเอาไปประยุกษ์ใช้แล้วมันไม่เลื่อนลงอะครับ

นี่โคดปัจจุบันครับ
Code (PHP)
view source
print?
01.$(document).ready(function (){
02.    var auto_refresh = setInterval(
03.        function (){
04.            $('#boxmsg').load('getmsg.php');
05.        }, 100
06.    );
07.});
08.function scrollfocus(){
09.    var el = document.getElementById('boxmsg');
10.    el.tabIndex = 32456;
11.    el.focus();
12.}
13. 
14. 
15.<div class="boxchat" id="boxmsg"></div>




Tag : HTML/CSS
Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2014-06-21 13:27:33 By : kuzaa516 View : 3019 Reply : 6
 

 

No. 1



โพสกระทู้ ( 9,590 )
บทความ ( 2 )



สถานะออฟไลน์


Code (JavaScript)
view source
print?
01.<div id="test_div" style="position: fixed; left: 100px; top: 50px; width: 200px; height: 100px; background-color: red" >
02.<center>Content</content>
03.</div>
04.<script>
05.var Body;
06.var IE = (document.all);
07.if (IE) Body=(document.compatMode!="BackCompat")? document.documentElement : document.body;
08. 
09.function get_scroll() {
10.    var pos={top: 0, left: 0}
11.    if (IE) { pos.top=Body.scrollTop; pos.left=Body.scrollLeft;}
12.    else {pos.top=window.pageYOffset; pos.left=window.pageXOffset;}
13.    return pos;
14.}
15.function get_page() {
16.    var pos={w: 0, h: 0}
17.    if (IE) { pos.h = Body.clientHeight; pos.w = Body.clientWidth}
18.    else { pos.h = window.innerHeight; pos.w=window.innerWidth;}
19.    return pos;
20.}
21. 
22.var ob=document.getElementById('test_div');
23. 
24.var wsize=get_page();
25.var wscroll=get_scroll();
26.var cur_left=wscroll.left + Math.floor((wsize.w - ob.offsetWidth) /2 );
27.if (cur_left<0) cur_left=0;
28.var cur_top=wscroll.top + Math.floor((wsize.h - ob.offsetHeight) /2 );
29.if (cur_top<0) cur_top=0;
30.if (IE) {   ob.style.pixelTop=cur_top;  ob.style.pixelLeft=cur_left; }
31.else{       ob.style.top=cur_top+"px";  ob.style.left=cur_left+"px";    }
32. 
33.</script>


ลองดูครับ น่าจะได้ประโยชน์บ้าง


ประวัติการแก้ไข
2014-06-21 15:25:04
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2014-06-21 15:24:18 By : Chaidhanan
 

 

No. 2



โพสกระทู้ ( 216 )
บทความ ( 1 )



สถานะออฟไลน์
Twitter Facebook Blogger

ตอบความคิดเห็นที่ : 1 เขียนโดย : Chaidhanan เมื่อวันที่ 2014-06-21 15:24:18
รายละเอียดของการตอบ ::
ลองแล้วครับ ไม่ได้ครับป๋ม ไม่เลื่อนลงเลยครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2014-06-21 16:34:33 By : kuzaa516
 

 

No. 3



โพสกระทู้ ( 9,590 )
บทความ ( 2 )



สถานะออฟไลน์


position: fixed; กำหนดให้ div อยู่ตรงไหนตรงนั้นของหน้าจอ หน้าจอเลื่อนตัวมันจะไม่เลื่อนไปไหน
z-index: 9999 ถ้าเลขมาก ก็จะได้รับ priority ให้ลอยอยู่ข้างบน เหนือตัวที่มีเลขน้อย
left: 100px; กำหนดให้ด้านซ้ายอยู่ที่ตำแหน่ง 100pixel;
top: 50px; กำหนดให้อยู่ด้านบนที่ตำแหน่ง 50px

ลองเอาโค๊ดนี้ ใส่ใน test.html แล้วลอง scroll หน้าจอดูครับ

Code (PHP)
view source
print?
001.<html>
002.<body>
003.1ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
004.2ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
005.3ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
006.4ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
007.5ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
008.6ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
009.7ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
010.8ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
011.9ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
012.0ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
013.1ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
014.2ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
015.3ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
016.4ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
017.5ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
018.6ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
019.7ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
020.8ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
021.9ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
022.0ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
023.1ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
024.2ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
025.3ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
026.4ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
027.5ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
028.6ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
029.7ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
030.8ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
031.9ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
032.0ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
033.1ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
034.2ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
035.3ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
036.4ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
037.5ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
038.6ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
039.7ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
040.8ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
041.9ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
042.0ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
043.1ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
044.2ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
045.3ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
046.4ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
047.5ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
048.6ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
049.7ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
050.8ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
051.9ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
052.0ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
053.1ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
054.2ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
055.3ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
056.4ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
057.5ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
058.6ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
059.7ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
060.8ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
061.9ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
062.0ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
063.1ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
064.2ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
065.3ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
066.4ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
067.5ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
068.6ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
069.7ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
070.8ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
071.9ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
072.0ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
073.1ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
074.2ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
075.3ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
076.4ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
077.5ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
078.6ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
079.7ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
080.8ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
081.9ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
082.0ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
083.1ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
084.2ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
085.3ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
086.4ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
087.5ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
088.6ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
089.7ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
090.8ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
091.9ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
092.0ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
093.1ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
094.2ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
095.3ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
096.4ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
097.5ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
098.6ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
099.7ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
100.8ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
101.9ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
102.<div id="test_div" style="position: fixed; left: 100px; top: 500px; width: 200px; height: 100px; background-color: red; z-index: 9999" >
103.<center>Content</content>
104.</div>
105.</body>
106.</html>


ประวัติการแก้ไข
2014-06-21 17:46:30
2014-06-21 17:47:20
2014-06-21 17:48:09
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2014-06-21 17:44:24 By : Chaidhanan
 

 

No. 4



โพสกระทู้ ( 216 )
บทความ ( 1 )



สถานะออฟไลน์
Twitter Facebook Blogger

ไม่ๆๆ คือผมหมายถึง ผมกำหนด div ให้มี scroll แบบ auto ตามโค้ด css นี้

Code (PHP)
view source
print?
01..boxchat{
02.    font-family: tahoma;
03.    font-size: 14px;
04.    color: #202020;
05.    width: 600px;
06.    height: 250px;
07.    word-wrap:break-word;
08.    overflow-y: auto;
09.    border: #888888 1px solid;
10.    text-align: left;
11.    padding-left: 5px;
12.    padding-right: 5px;
13.    background-color: #E9E9E9;
14.}


แล้วใช้ DIV ดึงออกมาตามนี้อะครับ

Code (PHP)
view source
print?
1.<div class="boxchat" id="boxmsg"></div>


ที่นี้เมื่อมีข้อความใน div จนล้นลงมา มันจะเกิด scroll แต่ผม อยากให้ scroll มันอยู่ด้านล่างเสมออะครับ
ซึ่ง ปกติ scroll มันจะอยู่ด้านบนใช่ไหมครับ ขอบคุณครับป๋ม
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2014-06-21 17:55:38 By : kuzaa516
 

 

No. 5



โพสกระทู้ ( 9,590 )
บทความ ( 2 )



สถานะออฟไลน์


window.setInterval(function() {
var elem = document.getElementById('boxmsg');
elem.scrollTop = elem.scrollHeight;
}, 5000);



สงสัยผมจะเป็นคนอ่านอะไรเข้าใจยากแน่ๆเลย 5555


ประวัติการแก้ไข
2014-06-21 18:01:02
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2014-06-21 17:59:32 By : Chaidhanan
 

 

No. 6



โพสกระทู้ ( 216 )
บทความ ( 1 )



สถานะออฟไลน์
Twitter Facebook Blogger

*0* แจ่มเลยครับท่าน ได้ท่านช่วยอีกแล้ว ขอบคุณมากๆครับป๋ม ^ ^

จริงๆก็ได้แล้วแหละครับ แต่ถ้าเราต้องการให้เลื่อนขึ้นได้ด้วยอ่ะครับ
แบบ เลื่อนขึ้นธรรมดาๆ โดยที่ไม่ดึงลง จะทำได้ไหมอะครับ แต่พอเปิดหน้าเว็บมาตอนแรก scroll อยู่ข้างล่างอะครับ

ผมรู้ผมอธิบายเข้าใจไหม นะครับ


ประวัติการแก้ไข
2014-06-21 18:08:24
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2014-06-21 18:02:06 By : kuzaa516
 

   

ค้นหาข้อมูล
   
 

แสดงความคิดเห็น
Re : จะทำ div scroll ให้อยู่ล่างสุดตลอด มันทำได้ไหมครับ
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
 Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)





ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2025 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่