|
 |
| |
เพิ่มข้อมูลเข้าไปใน Div อยากให้ Scroll Bar ยึดกับ element ที่กำลังดูอยู่ |
| |
 |
|
|
 |
 |
|
แบบเบสิค
slimScroll + Lazy Loader
<!DOCTYPE html>
<html>
<head>
<title>slimScroll + Lazy Loader</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-slimScroll/1.3.8/jquery.slimscroll.min.js"></script>
</head>
<body>
<div id="testDiv">
<div style="padding: 3px; border: 1px solid #ccc; margin: 5px;">#1</div>
<div style="padding: 3px; border: 1px solid #ccc; margin: 5px;">#2</div>
<div style="padding: 3px; border: 1px solid #ccc; margin: 5px;">#3</div>
<div style="padding: 3px; border: 1px solid #ccc; margin: 5px;">#4</div>
<div style="padding: 3px; border: 1px solid #ccc; margin: 5px;">#5</div>
<div style="padding: 3px; border: 1px solid #ccc; margin: 5px;">#6</div>
<div style="padding: 3px; border: 1px solid #ccc; margin: 5px;">#7</div>
<div style="padding: 3px; border: 1px solid #ccc; margin: 5px;">#8</div>
<div style="padding: 3px; border: 1px solid #ccc; margin: 5px;">#9</div>
<div style="padding: 3px; border: 1px solid #ccc; margin: 5px;">#10</div>
</div>
<!-- https://www.thaicreate.com/php/forum/107930.html -->
</body>
<script>
$('#testDiv').slimscroll({
alwaysVisible: true,
start: 'top',
height: 150,
width: 300
});
$('#testDiv').on('scroll', function() {
let div = $(this).children()[0];
if(div.scrollTop == div.scrollHeight - div.clientHeight) {
// เพิ่ม element
var el = $('<div></div>').html('#' + ($('#testDiv').children().length + 1) + ' โหลดตอน scroll')
.css({ padding: '3px', border: '1px solid #ccc', margin: '5px' });
$('#testDiv').append(el);
}
});
</script>
</html>
https://www.w3schools.com/code/tryit.asp?filename=GF0HOTN663ZY
|
 |
 |
 |
 |
| Date :
2020-05-29 17:20:35 |
By :
PhrayaDev |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
|
|
| |
|
 Load balance : Server 05
|
