jcm*_*tch 15 html javascript css
我知道有一些类似的问题,但它们要么对我的用例不起作用,要么接受的答案有一个对我不起作用的缺陷.所以...
我有一个包含元素列表的页面.单击列表中的元素将打开一个叠加层,其中包含有关该元素的详细信息.我需要覆盖层可滚动但我不希望覆盖层下面的其余部分滚动,这样一旦覆盖层关闭,你就处于相同的位置(覆盖层也略微透明,因此对用户来说很烦人)看到页面在下面滚动,也是为什么我无法保存滚动并重置关闭).
现在除了iOS之外我到处都有工作.这基本上就是我所拥有的:
<html>
<body>
<ul id="list">
<li>something 1</li>
<li>something 2</li>
<li>something 3</li>
<li>something 4</li>
<li>something 5</li>
</ul>
<div id="overlay"></div>
</body>
</html>
CSS:
body.hidden {
overflow: hidden;
}
#overlay {
opacity: 0;
top: -100vh;
}
#overlay.open {
opacity: 1;
overflow-y: scroll;
overflow-x: hidden;
top: 0;
}
然后在我的点击处理程序中,我打开hidden课程body,打开open课程#overlay,并#overlay用我的内容填充元素.就像我说的那样,除了iOS之外,它在任
解决方案我见过其他地方说我需要使用position:fixed,并height:100%在body和/或html标签.此解决方案的问题在于您丢失了滚动位置,当您关闭叠加层时,您将返回页面顶部.其中一些列表可能很长,所以这对我来说不是一个选择.
preventDefault因为我需要覆盖内容可滚动,所以我无法阻止完全滚动身体或其他东西.
还有其他建议吗？
jer*_*low 15
现在没办法解决这个问题.从iOS 9.3开始,仍然没有好办法阻止身体上的滚动.我目前在所有需要它的网站上实现的最佳方法是锁定html和正文的高度和溢出.
html, body {
height: 100%;
overflow: hidden;
}
这是防止iOS滚动叠加/模态背后的内容的最佳方法.
然后为了保持滚动位置,我将内容向后移动,使其看起来像保留它,然后当模态关闭时恢复身体的位置.
我在jQuery中使用锁定和解锁功能来完成此操作
var $docEl = $('html, body'),
$wrap = $('.content'),
$.scrollTop;
$.lockBody = function() {
if(window.pageYOffset) {
scrollTop = window.pageYOffset;
$wrap.css({
top: - (scrollTop)
});
}
$docEl.css({
height: "100%",
overflow: "hidden"
});
}
$.unlockBody = function() {
$docEl.css({
height: "",
overflow: ""
});
$wrap.css({
top: ''
});
window.scrollTo(0, scrollTop);
window.setTimeout(function () {
scrollTop = null;
}, 0);
}
当你把所有这些拼凑在一起时,你得到http://codepen.io/jerrylow/pen/yJeyoG如果你想在手机上测试它只是结果:http://jerrylow.com/demo/ios-body-lock /
当我滚动模态时,为什么页面会滚动？
如果你-webkit-overflow-scrolling: touch;在模态后面的元素上启用了css属性,那么一些本机代码会启动,这似乎是在侦听我们无法捕获的touchmove事件.
所以现在怎么办？
我已经为我的应用程序修复了这个问题,当模态可见时,通过添加一个类来否定css属性.这是一个完全有效的例子.
let pageEl = document.querySelector(".page");
let modalEl = document.querySelector(".modal");
function openModal(e){
e.preventDefault();
pageEl.classList.add("page--has-modal");
modalEl.classList.remove("hidden");
window.addEventListener("wheel", preventScroll);
window.addEventListener("touchmove", preventScroll);
}
function closeModal(e){
e.preventDefault();
pageEl.classList.remove("page--has-modal");
modalEl.classList.add("hidden");
window.removeEventListener("wheel", preventScroll);
window.removeEventListener("touchmove", preventScroll);
}
window.addEventListener("click", function(){
console.log(modalEl.scrollHeight);
console.log(modalEl.clientHeight);
});
function preventScroll(e){
if (!isDescendant(modalEl, e.target)){
e.preventDefault();
return false;
}
let modalTop = modalEl.scrollTop === 0;
let modalBottom = modalEl.scrollTop === (modalEl.scrollHeight - modalEl.clientHeight);
if (modalTop && e.deltaY < 0){
e.preventDefault();
} else if (modalBottom && e.deltaY > 0){
e.preventDefault();
}
}
function isDescendant(parent, child) {
var node = child.parentNode;
while (node != null) {
if (node == parent) {
return true;
}
node = node.parentNode;
}
return false;
}.page {
-webkit-overflow-scrolling: touch;
}
.page--has-modal {
-webkit-overflow-scrolling: auto;
}
.modal {
position: absolute;
top: 50px;
left: 50px;
right: 50px;
bottom: 50px;
background: #c0c0c0;
padding: 50px;
text-align: center;
overflow: auto;
-webkit-overflow-scrolling: auto;
}
.hidden {
display: none;
}<div class="page">
<button onclick="openModal(event);">Open modal</button>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer consequat sapien a lectus gravida euismod. Sed vitae nisl non odio viverra accumsan. Curabitur nisi neque, egestas sed, vulputate sit amet, luctus vitae, dolor. Cras lacus massa, sagittis ut, volutpat consequat, interdum a, nulla. Vivamus rhoncus molestie nulla. Ut porttitor turpis sit amet turpis. Nam suscipit, justo quis ullamcorper sagittis, mauris diam dictum elit, suscipit blandit ligula ante sit amet mauris. Integer id arcu. Aenean scelerisque. Sed a purus. Pellentesque nec nisl eget metus varius tempor. Curabitur tincidunt iaculis lectus. Aliquam molestie velit id urna. Suspendisse in ante ac nunc commodo placerat.</p>
<p>Morbi gravida posuere est. Fusce id augue. Sed facilisis, felis quis ornare consequat, neque risus faucibus dui, quis ullamcorper tellus lacus vitae felis. Phasellus ac dolor. Integer ante diam, consectetuer in, tempor vitae, volutpat in, enim. Integer diam felis, semper at, iaculis ut, suscipit quis, dolor. Vestibulum semper, velit et tincidunt vehicula, nisl risus eleifend ipsum, vel consectetuer enim dolor id magna. Praesent hendrerit urna ac lacus. Maecenas porttitor ipsum sed orci. In ac odio vel lorem tincidunt pellentesque. Nam tempor pulvinar turpis. Nunc in leo in libero ultricies interdum. Proin ut urna. Donec ultricies nunc dapibus justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent vulputate, lectus pulvinar nonummy eleifend, sapien urna posuere metus, vel auctor risus odio eu augue. Cras vitae dolor. Phasellus dolor. Etiam enim. Donec erat felis, tincidunt quis, luctus in, faucibus at, est.</p>
<div class="modal hidden">
Hi there!
<button onclick="closeModal(event);">Close me</button>
<p>Morbi gravida posuere est. Fusce id augue. Sed facilisis, felis quis ornare consequat, neque risus faucibus dui, quis ullamcorper tellus lacus vitae felis. Phasellus ac dolor. Integer ante diam, consectetuer in, tempor vitae, volutpat in, enim. Integer diam felis, semper at, iaculis ut, suscipit quis, dolor. Vestibulum semper, velit et tincidunt vehicula, nisl risus eleifend ipsum, vel consectetuer enim dolor id magna. Praesent hendrerit urna ac lacus. Maecenas porttitor ipsum sed orci. In ac odio vel lorem tincidunt pellentesque. Nam tempor pulvinar turpis. Nunc in leo in libero ultricies interdum. Proin ut urna. Donec ultricies nunc dapibus justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent vulputate, lectus pulvinar nonummy eleifend, sapien urna posuere metus, vel auctor risus odio eu augue. Cras vitae dolor. Phasellus dolor. Etiam enim. Donec erat felis, tincidunt quis, luctus in, faucibus at, est.</p>
</div>
</div>我们遇到了这个确切的问题-最终使用以下方法解决了该问题：
https://github.com/lazd/iNoBounce
脚本加载后，我们立即不得不调用一个陷阱，iNoBounce.disable()因为它已启用，从而阻止了任何滚动行为。
| 归档时间： |
|
| 查看次数： |
46888 次 |
| 最近记录： |