Has anyone encountered an issue with fixing an element with position: fixed inside a big Iscroll page? It seems like the element scrolls along with the content due to the transition imposed by Iscroll.
I'm trying to fix the "FIXTHIS" element, but it doesn't stay fixed in place. Is there a solution to this problem?
Check out the JSFiddle example: https://jsfiddle.net/10amw389/1/
<div id="wrapper">
<div id="scroller">
<div class="fixthis">FIX THIS</div>
<ul>
<li><a href="javascript:myScroll.scrollToElement(document.querySelector('#scroller li:nth-child(10)'))">Scroll to element 10</a></li>
<li>Pretty row 2</li>
<li>Pretty row 3</li>
<li>Pretty row 4</li>
<li>Pretty row 5</li>
<li>Pretty row 6</li>
<li>Pretty row 7</li>
<li>Pretty row 8</li>
<li>Pretty row 9</li>
<li><a href="javascript:myScroll.scrollToElement(document.querySelector('#scroller li:nth-child(25)'), null, null, true)">Center element 25 to screen</a></li>
<li>Pretty row 11</li>
<li>Pretty row 12</li>
<li>Pretty row 13</li>
<li>Pretty row 14</li>
<li>Pretty row 15</li>
</ul>
</div>
JS
var myScroll;
function loaded() {
myScroll = new IScroll('#wrapper', { mouseWheel: true, click: true, HWCompositing: false });
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
loaded();
CSS
.fixthis {
position: fixed;
width: 100%;
text-align: center;
padding: 25px;
background: #009BFF;
color: #FFFFFF;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
-ms-touch-action: none;
}
body,ul,li {
padding: 0;
margin: 0;
border: 0;
}
body {
font-size: 12px;
font-family: ubuntu, helvetica, arial;
overflow: hidden; /* this is important to prevent the whole page from bouncing */
}
#wrapper {
position: absolute;
z-index: 1;
top: 45px;
bottom: 48px;
left: 0;
width: 100%;
background: #ccc;
overflow: hidden;
}
#scroller {
position: absolute;
z-index: 1;
-webkit-tap-highlight-color: rgba(0,0,0,0);
width: 100%;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
-o-text-size-adjust: none;
text-size-adjust: none;
}
#scroller ul {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
text-align: left;
}
#scroller li {
padding: 0 10px;
height: 40px;
line-height: 40px;
border-bottom: 1px solid #ccc;
border-top: 1px solid #fff;
background-color: #fafafa;
font-size: 14px;
}
Any advice or tips on how to address this issue would be greatly appreciated.