如何防止滚动？ （跨浏览器解决方法）
[英]How to prevent scrolling? (cross-browser workaround)
问题描述
问题或疑问
我想阻止元素的实际滚动，但我确实想要滚动条的好处（所以有些事情不需要用一些JavaScript编程，而不是浏览器为我们处理事情）。
是否有人为此提供了更好或更好的解决方案？ 任何帮助都非常感谢。
更新13-03-2017
我终于想出了一个似乎有效的解决方案（测试使用）IE11，Edge，Chrome，Firefox，Chrome for Android和Firefox for Android。
所以人们可以忽略这个问题或问题描述的其余部分 。
更新12-03-2017
找到了一种切换（阻止）滚动浏览IE 11，Edge，Firefox，Chrome和Firefox for Android的方法。 虽然它在Chrome for Android中确实运行得不是很好（非常滞后）。 谁知道为什么？
这是我的解决方案（12-03-2017）的摘要，但Chrome for Android似乎不喜欢它（！） 。 请帮助改进这个解决方案（或者可能有更好的方法与这个特定的解决方案不同？）。
- 一个
div与滚动内容的position: fixed（我的代码中的#scrollsviascrolldistract）。 - 一个
div具有与滚动内容div相同的高度，其具有position: absolute（或者可能是position: relative）。 这是嵌入式代码示例中的#scrolldistract。 - 调用
window.requestAnimationFrame与调整的回调函数marginTop滚动内容的值div（#scrollsviascrolldistract相对于电流）scrollTop（使用负余量为这个）窗口的值。 - 然后，为了控制和防止滚动，可以不更新此
marginTop值以使滚动内容div不受当前滚动条位置的影响。
测试了IE 11，Edge，Firefox和Chrome（可以正常使用）和Chrome for Android（不喜欢它）的代码片段，还测试了Firefox for Android（确实喜欢它）。 似乎比使用position: fixed两个div元素更好地工作。
var scrollDisabled = false; function toggleScroll() { scrollDisabled = !scrollDisabled; } function doScroll() { var st; if (!scrollDisabled) { $("#scrollsviascrolldistract").css("marginTop", -$(window).scrollTop()); } window.requestAnimationFrame(doScroll); } window.requestAnimationFrame(doScroll); $("#scrolltoggler").on('click', toggleScroll);
body { background-color: whitesmoke; } #scrollsviascrolldistract { position: fixed; left: 0px; top: 0px; width: 100%; } #scrolldistract { position: absolute; left: 0; top: 0; height: 6000px; } .red, .blue { position: relative; width: 100%; height: 300px; } .red { background-color: red; } .blue { background-color: blue; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="scrolldistract"> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" height="6000"> </div> <div id="scrollsviascrolldistract"> <div class="red">BEGIN</div> <div class="blue"><button id="scrolltoggler">Toggle Scroll On/Off</button></div> <div class="red"> </div> <div class="blue"> </div> <div class="red"> </div> <div class="blue"> </div> <div class="red"> </div> <div class="blue"> </div> <div class="red"> </div> <div class="blue"> </div> <div class="red"> </div> <div class="blue"> </div> <div class="red"> </div> <div class="blue"> </div> <div class="red"> </div> <div class="blue"> </div> <div class="red"> </div> <div class="blue"> </div> <div class="red"> </div> <div class="blue">END</div> </div>
早期的解决方案（请忽略12-03-2017;请参阅更新的解决方案）
所以我制作一个元素滚动但不要让它可见。 我在其中放置了一个间隔图像，以将其填充到合适的高度。
然后出现跨浏览器问题。
早期解决方案 - 哪些有效，哪些无效？
铬
- 通过鼠标或滚动条滚动工作。
- 即使focus（）工作也可以立即使用键滚动。
适用于Android的Chrome
- 滚动通过触摸工作（应该如此）。
火狐
- Ctrl + PageUp / Ctrl + PageDown切换选项卡并禁用滚动，直到您抓住滚动条。
- 通过键滚动工作，但必须在背景区域中单击才能获得焦点。
适用于Android的Firefox
- 总灾难：滚动后停止滚动。 不知道为什么。
边缘
- 似乎工作除了focus（）。 需要单击文档中的某个位置（红色/蓝色块或背景）。
Internet Explorer 11
- 仅通过鼠标工作。 使用键滚动无法抓住焦点，甚至无法手动抓取。
代码等
演示生活在这里： https ： //jsfiddle.net/hn63z0jt/
一些HTML5（带有适当的DOCTYPE）：
<div id="scrollsviascrolldistract">
<div class="red">BEGIN</div>
<div class="blue"> </div>
<div class="red"> </div>
<div class="blue"> </div>
<div class="red"> </div>
<div class="blue"> </div>
<div class="red"> </div>
<div class="blue"> </div>
<div class="red"> </div>
<div class="blue"> </div>
<div class="red"> </div>
<div class="blue"> </div>
<div class="red"> </div>
<div class="blue"> </div>
<div class="red"> </div>
<div class="blue"> </div>
<div class="red"> </div>
<div class="blue"> </div>
<div class="red"> </div>
<div class="blue">END</div>
</div>
一些CSS：
body {
background-color: whitesmoke;
}
#scrollsviascrolldistract {
position: fixed;
left: 0px;
top: 0px;
}
#scrolldistract {
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
overflow-y: scroll;
background: rgba(0,0,0,0);
z-index: 999;
}
.red, .blue {
position: relative;
width: 900px;
height: 300px;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
一些JavaScript（使用jQuery）：
$(function() {
var $window = $(window);
var $scrollsviascrolldistract = $('#scrollsviascrolldistract');
var $scrolldistract = $('#scrolldistract');
$scrolldistract.focus();
$scrolldistract.on('scroll', function() {
var scrollTop = $scrolldistract.scrollTop();
$scrollsviascrolldistract.css('marginTop', -scrollTop);
});
});
1 个解决方案
解决方案1
0 已采纳 2017-03-13 15:53:31
我现在准备回答我自己的问题了。
所以这是一种切换（阻止）滚动的方法：
- 一个
div与滚动内容的position: fixed（我的代码中的#scrollsviascrolldistract）。 - 一个
div具有与滚动内容div相同的高度，其具有position: absolute（或者可能是position: relative）。 这是嵌入式代码示例中的#scrolldistract。 - 使用回调函数调用
window.requestAnimationFrame，该函数调整marginTopdivmarginTop值（此处称为#puller），该值应该是与窗口的当前scrollTop值相关的滚动内容div（#scrollsviascrolldistract）的第一个子项（使用负数）保证金）。 起初我以为我可以自己拉出滚动内容（更改marginTop的#scrollsviascrolldistract），但这在某些浏览器中不起作用。 - 然后，为了控制和防止滚动，可以不更新此
marginTop值以使滚动内容div不受当前滚动条位置的影响。
测试了IE 11，Edge，Firefox和Chrome中的代码片段以及适用于Android的Chrome和适用于Android的Firefox。 似乎比使用position: fixed两个div元素更好地工作。
$(function() { var scrollDisabled = false; var $window = $(window); function doScroll() { var st = $window.scrollTop(); if (!scrollDisabled) { console.log(st); if (st > 6000 - $window.innerHeight()) { $("#puller").css("marginTop", -(6000 - $window.innerHeight())); } else { $("#puller").css("marginTop", -st); } } window.requestAnimationFrame(doScroll); } window.requestAnimationFrame(doScroll); $("#scrolltoggler").on('click', function(e) { scrollDisabled = !scrollDisabled; }); });
#scrollsviascrolldistract { position: fixed; left: 0px; top: 0px; width: 100%; } #scrolldistract { position: absolute; left: 0; top: 0; width: 100%; height: 6000px; } #puller { position: relative; margin-top: 0px; left: 0px; top: 0px; } .red, .blue { position: relative; margin-top: auto !important; width: 100%; height: 300px; } .red { background-color: red; } .blue { background-color: blue; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="scrolldistract"> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" width="1" height="6000"> </div> <div id="scrollsviascrolldistract"> <div id="puller"></div> <div class="red">BEGIN</div> <div class="blue"><button id="scrolltoggler">Toggle Scroll On/Off</button></div> <div class="red"> </div> <div class="blue"> </div> <div class="red"> </div> <div class="blue"> </div> <div class="red"> </div> <div class="blue"> </div> <div class="red"> </div> <div class="blue"> </div> <div class="red"> </div> <div class="blue"> </div> <div class="red"> </div> <div class="blue"> </div> <div class="red"> </div> <div class="blue"> </div> <div class="red"> </div> <div class="blue"> </div> <div class="red"> </div> <div class="blue">END</div> </div>
平滑滚动跨浏览器
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.