A scrollbar is a widget in which some content is put and that content can be scrolled by a user in a prefixed direction. To check whether a scrollbar is visible or not, we can make use of our own custom function.
Example 1: This example shows a simple code snippet which can be used to check if the horizontal or vertical scrollbar is visible or not.
html
<!DOCTYPE html> < html >
< head >
< script src =
</ script >
<!--styling our elements-->
< 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 >
<!--check the element with id 'geek'
for scrollbar using our custom function-->
< button onclick = "check('geek')" >
< br >scrollable</ button >
</ body >
</ html >
|
Output:
Example 2:
html
<!DOCTYPE html> < html >
< head >
</ script >
< script >
$(function() {
alert('Div 1 has scrollbar: ' + $('#geek1').hasScrollBar());
alert('Div 2 has scrollbar: ' + $('#geek2').hasScrollBar());
});
(function($) {
$.fn.hasScrollBar = function() {
return this.get(0).scrollHeight > this.height();
/*The element will display a scrollbar
if the scroll height is greater than the client height*/
}
})(jQuery);
</ script >
</ head >
< body >
< div id = "geek1"
style="width: 100px;
height:100px;
overflow:auto;"
class = "my_class" >
Welcome to the world of Geeks!! How many times were you
frustrated while looking out for a good collection of
programming/algorithm/interview questions? What did you
expect and what did you get? This portal has been created
to provide well written, well thought and well explained
solutions for selected questions.
< br />
< br />
</ div >
< br >
< br >
< div id = "geek2"
style="width: 300px;
height:300px;
overflow:auto;"
class = "my_class" >
* No scrollbar
</ div >
</ body >
</ html >
|
Output: