<!DOCTYPE html>
<
html
>
<
head
>
<
script
src
=
</
script
>
<
style
>
#geek {
background-color: green;
overflow: auto;
float: left;
}
#inner {
width: 150px;
height: 250px;
}
</
style
>
<
script
>
function isScrollable(el) {
/*The scrollTop() method sets or returns the
vertical scrollbar position for the selected elements*/
var y1 = el.scrollTop;
el.scrollTop += 1;
var y2 = el.scrollTop;
el.scrollTop -= 1;
var y3 = el.scrollTop;
el.scrollTop = y1;
/*The scrollLeft() method returns the horizontal
scrollbar position for the selected elements.*/
var x1 = el.scrollLeft;
el.scrollLeft += 1;
var x2 = el.scrollLeft;
el.scrollLeft -= 1;
var x3 = el.scrollLeft;
el.scrollLeft = x1;
//returns true or false accordingly
return {
horizontallyScrollable: x1 !== x2 || x2 !== x3,
verticallyScrollable: y1 !== y2 || y2 !== y3
}
}
function check(id) {
/*the data is JSON type, convert it to string and then
check the element with given id for scrollbar*/
alert(JSON.stringify(isScrollable(document.getElementById(id))));
}
</
script
>
</
head
>
<
body
>
<
div
id
=
"geek"
style
=
"height: 100px;"
>
<
div
id
=
"inner"
></
div
>
</
div
>
<
button
onclick
=
"check('geek')"
>
<
br
>scrollable</
button
>
</
body
>
</
html
>