Created
July 22, 2011 18:54
-
-
Save jlbruno/1100124 to your computer and use it in GitHub Desktop.
a function to check if a certain element is scrollable, but is NOT showing scrollbars. Useful to use as a test for when you might want to implement another scrolling solution, such as iScroll for iPad.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var isItScrollableWithoutVisibleScrollbars = function(el) { | |
if (el === null) { | |
return false; | |
} | |
var isScrollable = false; | |
var hasScrollbars = false; | |
// first, lets find out if it has scrollable content | |
isScrollable = el.scrollHeight > el.offsetHeight ? true : false; | |
// if it's scrollable, let's see if it likely has scrollbars | |
if (isScrollable) { | |
hasScrollbars = (el.offsetWidth > el.scrollWidth) ? true : false; | |
} | |
if (isScrollable && !hasScrollbars) { | |
return true; | |
} else { | |
return false; | |
} | |
}; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// example usage | |
if ( isItScrollableWithoutVisibleScrollbars(plwrap) ) { | |
playlistScroll = new iScroll('playlist'); | |
} |
Ok Jeff T has a refactoring winner here:
https://gist.github.com/1100144var isItScrollableWithoutVisibleScrollbars = function(el) { return (el && (el.scrollHeight > el.offsetHeight) && !(el.offsetWidth > el.scrollWidth)); };
Hello, many thanks!, I based on you short function for make my own and adjust it to my requirements. Every one Feel free to use it as you want guys!
return { x: el.offsetWidth > el.scrollWidth ,y: el.scrollHeight > el.offsetHeight };
@federicoleandroc you should release that as an npm package. "is-scrollable"?
@federicoleandroc you should release that as an npm package. "is-scrollable"?
+1
+1
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
So what happens when you only want to check if it's scrollable either horizontally or vertically or both, where would one specify that distinction:
I think passing an object that's defined as follows could help