使用-webkit-overflow-scrolling时保持元素固定:触摸

时间:2018-12-21 20:50:14

标签: javascript ios css

我将div用作具有CSS属性-webkit-overflow-scrolling: touch的容器,以在iOS设备上实现平滑滚动。

但是,当我向下滚动时,即使在滚动过程中也根本不会移动,固定点也会跟随跳跃。

有人知道如何防止这种行为并使元素完全固定吗?

到目前为止,我发现的唯一解决方案是将固定元素移出容器,但这需要在项目中进行一些复杂的更改,因此我想尽可能避免这种解决方案。

您需要在iOS设备上测试以下代码才能重现该问题:

.container {
    padding: 10px;
    -webkit-overflow-scrolling: touch;
}

.closeBtn {
    position: fixed;
    right: 0;
    top: 0;
}
<div class="container">
    <button type="button" class="closeBtn">Close</button>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel nisl eu erat scelerisque euismod. Praesent ut odio rhoncus, cursus lectus vel, dictum odio. Aliquam hendrerit vehicula consequat. Nulla molestie aliquet interdum. Quisque consectetur, purus finibus ultricies congue, lacus elit vehicula ipsum, eu fringilla ligula justo ut arcu. Aenean gravida pellentesque maximus. Sed erat ligula, scelerisque vitae est vitae, sagittis fermentum dui. Morbi in odio sed est convallis porttitor.</p>
    <p>Sed rutrum massa id suscipit semper. Phasellus justo nibh, volutpat dapibus magna ac, suscipit lobortis turpis. Sed blandit metus urna, et laoreet felis rutrum rhoncus. Vestibulum quis viverra elit. Vestibulum ut magna tempus, faucibus metus et, bibendum tellus. Vivamus at ultrices ligula. Nunc orci risus, sollicitudin non tellus sed, lacinia pretium lorem. Fusce hendrerit ipsum eget lectus sodales elementum ut et purus. Maecenas dignissim velit ut purus sagittis maximus. Nulla volutpat est a blandit scelerisque. In eget lacus eleifend, lacinia sem semper, dignissim nisl. Aliquam eu ornare ligula.</p>
    <p>Proin sed lacus ut felis finibus convallis. Aenean quis leo fringilla, aliquet ipsum id, lacinia enim. Suspendisse in tellus nisi. Morbi ac risus erat. Etiam pretium eu justo quis varius. Suspendisse ornare dui vitae purus scelerisque faucibus. Duis consectetur rutrum facilisis. Morbi leo felis, varius in imperdiet in, porttitor eu diam. Suspendisse eu sodales nisi. Nam lectus dolor, semper interdum quam sit amet, sagittis fermentum nisi. Aliquam ut leo ante. Suspendisse potenti. Vestibulum venenatis nisi eu pharetra gravida. Donec tempus, lorem a maximus euismod, ante nunc commodo lacus, sed posuere augue sem non sapien.</p>
    <p>Integer a auctor risus. Donec nec tellus vitae eros iaculis sollicitudin. Etiam nec tempus quam, sed pharetra tortor. Nam ornare venenatis tellus, et vehicula metus bibendum at. Phasellus laoreet, justo sit amet auctor imperdiet, tellus massa placerat est, sed lobortis magna est in nisi. Fusce fringilla, sapien non sodales consequat, arcu nunc finibus mi, ut venenatis nulla eros id arcu. Duis quis sagittis purus, at euismod tellus. Sed aliquet accumsan nulla, vel facilisis metus efficitur eu. Donec quis faucibus ante. Phasellus luctus luctus velit tempor finibus. Morbi in consequat mauris, quis vulputate lectus. Curabitur at scelerisque mauris. Phasellus egestas scelerisque eleifend. Suspendisse sit amet massa malesuada, ullamcorper velit at, congue quam. Sed et lobortis dolor, eu iaculis risus. Integer laoreet pretium sem, ut pellentesque tortor posuere vel.</p>
    <p>Cras commodo tellus metus, vel lobortis dolor sollicitudin ut. Mauris eget nulla mi. Praesent sit amet magna orci. Sed vulputate sed elit id vestibulum. Suspendisse quis magna ut nunc elementum scelerisque non ac arcu. Etiam et molestie felis. Sed justo nisi, bibendum sed blandit id, iaculis sit amet quam. Nam convallis id tellus nec interdum. Vestibulum tincidunt eros sit amet dignissim bibendum. Fusce eu leo at sapien ornare iaculis. Suspendisse eros justo, scelerisque sed lectus id, tincidunt posuere urna. Morbi facilisis arcu erat, nec vestibulum sem ornare eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>

我已经检查了这些问题,但是找不到任何答案,因此我正在检查有关此问题的任何更新:

0 个答案:

没有答案