fix guide scroll rubber banding on ios

This commit is contained in:
Luke Pulverenti 2016-12-07 16:11:13 -05:00
parent a8c3ec87ea
commit 672f3f4e85
3 changed files with 17 additions and 1 deletions

View File

@ -465,3 +465,8 @@
padding: 1em;
flex-shrink: 0;
}
.noRubberBanding {
/* This is needed to combat the rubber banding in iOS */
padding-bottom: 100px;
}

View File

@ -841,7 +841,7 @@
require(['scrollHelper'], function (scrollHelper) {
var fn = enabled ? 'on' : 'off';
scrollHelper.centerFocus[fn](view.querySelector('.smoothScrollY'), false);
scrollHelper.centerFocus[fn](view.querySelector('.guideVerticalScroller'), false);
scrollHelper.centerFocus[fn](view.querySelector('.programGrid'), true);
});
}
@ -936,6 +936,16 @@
programGrid.addEventListener('focus', onProgramGridFocus, true);
if (browser.iOS || browser.osx) {
context.querySelector('.channelsContainer').classList.add('noRubberBanding');
var programGridContainer = context.querySelector('.programGridContainer');
programGridContainer.classList.add('noRubberBanding');
programGridContainer.classList.remove('smoothScrollX');
programGridContainer.classList.add('hiddenScrollX');
}
dom.addEventListener(programGrid, 'scroll', function (e) {
onProgramGridScroll(context, this, timeslotHeaders);
}, {

View File

@ -28,6 +28,7 @@
<div class="programGridContainer programGrid smoothScrollX guideScroller" style="white-space: nowrap;">
</div>
</div>
</div>
<div class="guideRequiresUnlock hide">