javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 04:14:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(demos): add scrollbar fix class

Browse Source
This commit is contained in:
Drew Rygh
2015-10-26 11:56:12 -05:00
parent e8e6f55745
commit b6b459911a
4 changed files with 32 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
demos/component-docs/app.css
View File

@ -1,6 +1,9 @@
body, body:hover, body a, body button, body media-switch { body, body:hover, body a, body button, body media-switch {
cursor: url('http://ionicframework.com/img/finger.png'), auto; cursor: url('http://ionicframework.com/img/finger.png'), auto;
overflow: hidden; }
body.has-scrollbar scroll-content {
margin-right: -15px;
} }
section.hidden { section.hidden {
@ -71,7 +74,6 @@ ion-scroll {
scroll-content { scroll-content {
overflow-y: scroll; overflow-y: scroll;
margin-right: -15px;
} }
.md .ion-md-share { .md .ion-md-share {
@ -199,7 +201,7 @@ body.md {
} }
body.ios{ body.ios{
border-top: 20px solid #F8F8F8; border-top: 10px solid #F8F8F8;
} }
body.ios backdrop { body.ios backdrop {
@ -223,7 +225,7 @@ body.md img#md-only {
body.ios img#ios-only { body.ios img#ios-only {
display: block !important; display: block !important;
position: absolute; position: absolute;
top: -1rqww6px; top: -6px;
width: 100%; width: 100%;
height: auto; height: auto;
z-index: 9999; z-index: 9999;

34
demos/component-docs/helpers.ts
View File

@ -65,33 +65,35 @@ export function toTitleCase(str) {
} }
export function hasScrollbar() { export function hasScrollbar() {
console.log(window);
// The Modern solution if (typeof window.top.innerWidth === 'number') {
if (typeof window.innerWidth === 'number') return window.top.innerWidth > window.top.document.documentElement.clientWidth;
return window.innerWidth > document.documentElement.clientWidth }
// rootElem for quirksmode // rootElem for quirksmode
var rootElem = document.documentElement || document.body var rootElem = window.top.document.documentElement || window.top.document.body;
// Check overflow style property on body for fauxscrollbars // Check overflow style property on body for fauxscrollbars
var overflowStyle var overflowStyle;
if (typeof rootElem.currentStyle !== 'undefined') if (typeof rootElem.currentStyle !== 'undefined') {
overflowStyle = rootElem.currentStyle.overflow overflowStyle = rootElem.currentStyle.overflow;
}
overflowStyle = overflowStyle || window.getComputedStyle(rootElem, '').overflow overflowStyle = overflowStyle || window.top.getComputedStyle(rootElem, '').overflow;
// Also need to check the Y axis overflow // Also need to check the Y axis overflow
var overflowYStyle var overflowYStyle;
if (typeof rootElem.currentStyle !== 'undefined') if (typeof rootElem.currentStyle !== 'undefined') {
overflowYStyle = rootElem.currentStyle.overflowY overflowYStyle = rootElem.currentStyle.overflowY;
}
overflowYStyle = overflowYStyle || window.getComputedStyle(rootElem, '').overflowY overflowYStyle = overflowYStyle || window.top.getComputedStyle(rootElem, '').overflowY;
var contentOverflows = rootElem.scrollHeight > rootElem.clientHeight var contentOverflows = rootElem.scrollHeight > rootElem.clientHeight;
var overflowShown = /^(visible|auto)$/.test(overflowStyle) || /^(visible|auto)$/.test(overflowYStyle) var overflowShown = /^(visible|auto)$/.test(overflowStyle) || /^(visible|auto)$/.test(overflowYStyle);
var alwaysShowScroll = overflowStyle === 'scroll' || overflowYStyle === 'scroll' var alwaysShowScroll = overflowStyle === 'scroll' || overflowYStyle === 'scroll';
return (contentOverflows && overflowShown) || (alwaysShowScroll) return (contentOverflows && overflowShown) || (alwaysShowScroll)
} }

6
demos/component-docs/index.ts
View File

@ -40,6 +40,12 @@ class DemoApp {
}); });
}); });
window.parent.postMessage(this.platform.is('ios')? "ios":"android", "*"); window.parent.postMessage(this.platform.is('ios')? "ios":"android", "*");
if (helpers.hasScrollbar() === true) {
setTimeout(function() {
var body = document.getElementsByTagName('body')[0];
body.className = body.className + ' has-scrollbar';
}, 500);
}
}); });
} }

2
demos/component-docs/modals/modals.html
View File

@ -1,5 +1,5 @@
<ion-navbar *navbar class="show-navbar android-attr"> <ion-navbar *navbar class="android-attr">
<ion-title>Modals</ion-title> <ion-title>Modals</ion-title>
</ion-navbar> </ion-navbar>