Simple Div Scrolling using JavaScript

Jika berbicara tentang property overflow, salah satu yang tidak bisa lepas dan biasanya selalu mengikuti adalah property scroll! Apabila kita membuat sebuah konten area kemudian diberi batasan jarak ketinggiannya, maka akan terciptalah si scroll itu? Jadi salah satu fungsi scrolling adalah memberitahukan kepada kita, bahwasannya isi dari sebuah konten masih ada. Cara konvensional dari penggunaan scroll biasanya dengan menahan klik kiri pada mouse. Lantas bagaimana jika mouse kita rusak klik kirinya, tentu dengan bantuan tombol keyboard masih bisa :P

Example:

Retro lo-fi raw denim est excepteur dreamcatcher. Fap eiusmod reprehenderit exercitation, cred terry richardson biodiesel incididunt ex tempor synth est do ut. Synth voluptate whatever chambray irony in, jean shorts tempor veniam twee. Irure tempor terry richardson, sunt wolf eu irony veniam craft beer master cleanse voluptate beard +1 banksy. Wayfarers DIY raw denim, pariatur williamsburg incididunt fanny pack you probably haven't heard of them quinoa non helvetica aute laboris. Wayfarers DIY raw denim, pariatur williamsburg incididunt fanny pack you probably haven't heard of them quinoa non helvetica aute laboris. Leggings Austin ad, sustainable labore fap wolf. Synth voluptate whatever chambray irony in, jean shorts tempor veniam twee. Irure tempor terry richardson, sunt wolf eu irony veniam craft beer master cleanse voluptate beard +1 banksy. Scenester you probably haven't heard of them 8-bit odio. Wayfarers DIY raw denim, pariatur williamsburg incididunt fanny pack you probably haven't heard of them quinoa non helvetica aute laboris. Vinyl tumblr letterpress craft beer trust fund.. Ethical veniam bicycle rights nisi, odio yr assumenda synth fap. Scenester you probably haven't heard of them 8-bit odio. Stumptown irony VHS, keffiyeh ex tumblr keytar aute excepteur. Stumptown irony VHS, keffiyeh ex tumblr keytar aute excepteur.

Sekarang AA mau berbagi cara membuat simple div scrolling menggunakan bantuan JavaScript. Ketika disorot (hover) maka secara otomatis scroll akan berjalan dengan sendirinya ke atas atau ke bawah.
DEMO

codepen.io/beben-koben/full/Joejrm

Kode CSStd.scroll {cursor: pointer;width:100%;height:25px;text-align:center;background:#f5f5f5;}
td.scroll:after {content:'Hover Here';}Silahkan sobat hias sendiri dengan menambahkan variabel pada CSS!

<table width="100%" border="0" cellspacing="0" cellpadding="3" bgcolor="#ffffff">
<tr>
<td id="toUp" onMouseOver="scrollStart('Up', 'div_content', 'toUp');" onMouseOut="scrollEnd('toUp');" class="scroll"></td>
</tr>
<tr>
<td>
<div id="div_content" style="height:200px; overflow-y:hidden; overflow-x:hidden;">

----------------------- BLAH-BLEH-BLOH HERE -----------------------

</div>
</td>
</tr>
<tr>
<td id="toDown" onMouseOver="scrollStart('Down', 'div_content', 'toDown');" onMouseOut="scrollEnd('toDown');" class="scroll"></td>
</tr>
</table>

NB:
Jika sobat ingin menambahkan div scrolling, pada markup HTML harus berbeda unik-id. Berikut unikID tersebut toUp, toDown and div_content Jadi dengan begitu mau sebanyak apapun scrolling content yg kalian inginkan harap perhatikan UNIK-ID!

<script type='text/javascript'>
//<![CDATA[
var ourInterval;
var origColor = "#f7f7f7";
var overColor = "#f3f3f3";
var scrollSpeed = 50;
var scrollHeight = 5;

function scrollStart(direction, divID, elementID){
//CHANGE THE BACKGROUND COLOR OF THE TD THE MOUSE IS OVER
document.getElementById(elementID).style.backgroundColor = overColor;
// REPEATED CALL EITHER scrollUp OR scrollDown
ourInterval = setInterval("scroll"+direction+"('"+divID+"')", scrollSpeed);
}
function scrollEnd(which){
// OUR MOUSE IS OUT, SO RETURN TD TO ORIGINAL COLOR
document.getElementById(which).style.backgroundColor = origColor;
// STOP CALLING THE SCROLL FUNCTION
clearInterval(ourInterval);
}
function scrollUp(which){
// SET THE SCROLL TOP
document.getElementById(which).scrollTop = document.getElementById(which).scrollTop - scrollHeight;
}
function scrollDown(which){
// SET THE SCROLL TOP
document.getElementById(which).scrollTop = document.getElementById(which).scrollTop + scrollHeight;
}
//]]>
</script>

FINISH.

Source by: dsgdev.wordpress.com/2006/09/25/simple-div-scrolling

Happy scroll \m/