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 ให้อยู่ล่างสุดตลอด มันทำได้ไหมครับ


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

 
Topic : 109363



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



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


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


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

นี่โคดปัจจุบันครับ
Code (PHP)
$(document).ready(function (){
    var auto_refresh = setInterval(
        function (){
            $('#boxmsg').load('getmsg.php'); 
        }, 100
    );
});
function scrollfocus(){
    var el = document.getElementById('boxmsg');
    el.tabIndex = 32456;
    el.focus(); 
}


<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 : 2999 Reply : 6
 

 

No. 1



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



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


Code (JavaScript)
<div id="test_div" style="position: fixed; left: 100px; top: 50px; width: 200px; height: 100px; background-color: red" >
<center>Content</content>
</div>
<script>
var Body;
var IE = (document.all);
if (IE) Body=(document.compatMode!="BackCompat")? document.documentElement : document.body;

function get_scroll() {
	var pos={top: 0, left: 0}
	if (IE) { pos.top=Body.scrollTop; pos.left=Body.scrollLeft;}
	else {pos.top=window.pageYOffset; pos.left=window.pageXOffset;}
	return pos;
}
function get_page() {
	var pos={w: 0, h: 0}
	if (IE) { pos.h = Body.clientHeight; pos.w = Body.clientWidth}
	else { pos.h = window.innerHeight; pos.w=window.innerWidth;}
	return pos;
}

var ob=document.getElementById('test_div');

var wsize=get_page();
var wscroll=get_scroll();
var cur_left=wscroll.left + Math.floor((wsize.w - ob.offsetWidth) /2 );
if (cur_left<0) cur_left=0;
var cur_top=wscroll.top + Math.floor((wsize.h - ob.offsetHeight) /2 );
if (cur_top<0) cur_top=0;
if (IE) {	ob.style.pixelTop=cur_top;	ob.style.pixelLeft=cur_left; }
else{		ob.style.top=cur_top+"px";	ob.style.left=cur_left+"px";	}

</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)
<html>
<body>
1ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
2ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
3ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
4ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
5ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
6ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
7ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
8ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
9ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
0ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
1ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
2ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
3ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
4ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
5ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
6ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
7ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
8ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
9ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
0ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
1ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
2ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
3ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
4ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
5ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
6ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
7ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
8ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
9ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
0ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
1ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
2ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
3ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
4ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
5ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
6ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
7ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
8ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
9ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
0ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
1ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
2ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
3ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
4ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
5ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
6ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
7ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
8ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
9ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
0ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
1ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
2ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
3ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
4ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
5ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
6ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
7ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
8ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
9ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
0ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
1ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
2ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
3ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
4ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
5ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
6ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
7ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
8ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
9ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
0ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
1ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
2ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
3ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
4ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
5ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
6ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
7ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
8ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
9ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
0ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
1ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
2ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
3ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
4ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
5ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
6ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
7ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
8ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
9ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
0ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
1ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
2ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
3ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
4ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
5ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
6ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
7ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
8ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
9ข้อความจิปาถะ ที่คุณแสดงบน เวป<br>
<div id="test_div" style="position: fixed; left: 100px; top: 500px; width: 200px; height: 100px; background-color: red; z-index: 9999" >
<center>Content</content>
</div>
</body>
</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)
.boxchat{
    font-family: tahoma;
    font-size: 14px;
    color: #202020;
    width: 600px;
    height: 250px; 
    word-wrap:break-word;
    overflow-y: auto;
    border: #888888 1px solid;
    text-align: left;
    padding-left: 5px;
    padding-right: 5px;
    background-color: #E9E9E9;
}


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

Code (PHP)
<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 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)





Load balance : Server 03
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 อัตราราคา คลิกที่นี่