<!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>