javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 19:57:22 +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 {
cursor: url('http://ionicframework.com/img/finger.png'), auto;
overflow: hidden;
}
body.has-scrollbar scroll-content {
margin-right: -15px;
}
section.hidden {
@ -71,7 +74,6 @@ ion-scroll {
scroll-content {
overflow-y: scroll;
margin-right: -15px;
}
.md .ion-md-share {
@ -199,7 +201,7 @@ body.md {
}
body.ios{
border-top: 20px solid #F8F8F8;
border-top: 10px solid #F8F8F8;
}
body.ios backdrop {
@ -223,7 +225,7 @@ body.md img#md-only {
body.ios img#ios-only {
display: block !important;
position: absolute;
top: -1rqww6px;
top: -6px;
width: 100%;
height: auto;
z-index: 9999;

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

@ -65,33 +65,35 @@ export function toTitleCase(str) {
}
export function hasScrollbar() {
console.log(window);
// The Modern solution
if (typeof window.innerWidth === 'number')
return window.innerWidth > document.documentElement.clientWidth
if (typeof window.top.innerWidth === 'number') {
return window.top.innerWidth > window.top.document.documentElement.clientWidth;
}
// 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
var overflowStyle
var overflowStyle;
if (typeof rootElem.currentStyle !== 'undefined')
overflowStyle = rootElem.currentStyle.overflow
if (typeof rootElem.currentStyle !== 'undefined') {
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
var overflowYStyle
var overflowYStyle;
if (typeof rootElem.currentStyle !== 'undefined')
overflowYStyle = rootElem.currentStyle.overflowY
if (typeof rootElem.currentStyle !== 'undefined') {
overflowYStyle = rootElem.currentStyle.overflowY;
}
overflowYStyle = overflowYStyle || window.getComputedStyle(rootElem, '').overflowY
overflowYStyle = overflowYStyle || window.top.getComputedStyle(rootElem, '').overflowY;
var contentOverflows = rootElem.scrollHeight > rootElem.clientHeight
var overflowShown = /^(visible|auto)$/.test(overflowStyle) || /^(visible|auto)$/.test(overflowYStyle)
var alwaysShowScroll = overflowStyle === 'scroll' || overflowYStyle === 'scroll'
var contentOverflows = rootElem.scrollHeight > rootElem.clientHeight;
var overflowShown = /^(visible|auto)$/.test(overflowStyle) || /^(visible|auto)$/.test(overflowYStyle);
var alwaysShowScroll = overflowStyle === 'scroll' || overflowYStyle === 'scroll';
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", "*");
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-navbar>