如何防止滚动？ （跨浏览器解决方法）

时间：2017-03-05 08:16:08

标签： javascript jquery css html5 cross-browser

问题或疑问

我想阻止实际滚动元素但我确实想要滚动条的好处（因此有些事情不需要通过编程方式使用某些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（确实喜欢它）。似乎比使用div两个position: fixed元素要好得多。

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">&nbsp;</div>
  <div class="blue">&nbsp;</div>
  <div class="red">&nbsp;</div>
  <div class="blue">&nbsp;</div>
  <div class="red">&nbsp;</div>
  <div class="blue">&nbsp;</div>
  <div class="red">&nbsp;</div>
  <div class="blue">&nbsp;</div>

  <div class="red">&nbsp;</div>
  <div class="blue">&nbsp;</div>
  <div class="red">&nbsp;</div>
  <div class="blue">&nbsp;</div>
  <div class="red">&nbsp;</div>
  <div class="blue">&nbsp;</div>
  <div class="red">&nbsp;</div>
  <div class="blue">&nbsp;</div>
  <div class="red">&nbsp;</div>
  <div class="blue">END</div>
</div>

早期解决方案（请忽略12-03-2017;请参阅更新的解决方案）

所以我制作一个元素滚动但不要让它可见。我在其中放置了一个间隔图像，以将其填充到合适的高度。

然后出现跨浏览器问题。

早期的解决方案 - 哪些有效，哪些无效？

铬

  • 通过鼠标滚动或滚动条工作。
  • 即使是focus（）也可以，因此可以立即使用键滚动。

Chrome for Android

  • 滚动通过触摸工作（应该如此）。

火狐

  • Ctrl + PageUp / Ctrl + PageDown切换选项卡并禁用滚动，直到您抓住滚动条。
  • 通过按键滚动工作，但必须在背景区域中单击才能抓住焦点。

Firefox for Android

  • 灾难总数：滚动后停止滚动。不知道为什么。

边线

  • 似乎工作除了焦点（）。需要单击文档中的某个位置（红色/蓝色块或背景）。

Internet Explorer 11

  • 仅通过鼠标工作。无法抓住焦点，甚至无法手动使用键进行滚动。

代码等

演示生活在这里： https://jsfiddle.net/hn63z0jt/

一些HTML5（使用适当的DOCTYPE）：                 

<div id="scrollsviascrolldistract">
  <div class="red">BEGIN</div>
  <div class="blue">&nbsp;</div>
  <div class="red">&nbsp;</div>
  <div class="blue">&nbsp;</div>
  <div class="red">&nbsp;</div>
  <div class="blue">&nbsp;</div>
  <div class="red">&nbsp;</div>
  <div class="blue">&nbsp;</div>
  <div class="red">&nbsp;</div>
  <div class="blue">&nbsp;</div>

  <div class="red">&nbsp;</div>
  <div class="blue">&nbsp;</div>
  <div class="red">&nbsp;</div>
  <div class="blue">&nbsp;</div>
  <div class="red">&nbsp;</div>
  <div class="blue">&nbsp;</div>
  <div class="red">&nbsp;</div>
  <div class="blue">&nbsp;</div>
  <div class="red">&nbsp;</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 个答案:

答案 0 :(得分：0)

我现在准备好回答我自己的问题了。

所以这是一种切换（阻止）滚动的方法：

  • 一个div，其滚动内容在我的代码中有position: fixed（#scrollsviascrolldistract）。
  • 一个div与滚动内容div具有相同的高度，其中position: absolute（或者可能position: relative更好）。这是嵌入式代码示例中的#scrolldistract。
  • 使用回调函数调用window.requestAnimationFrame，该函数会调整拉出器marginTop（此处称为div）的#puller值，该值应为滚动内容的第一个子句{{ 1}}（div）与窗口的当前#scrollsviascrolldistract值相关（使用负边距）。起初我认为我可以自己提取滚动内容（更改scrollTop的{​​{1}}），但这在某些浏览器中不起作用。
  • 然后，为了控制并阻止滚动，可以不更新此marginTop值，以使滚动内容#scrollsviascrolldistract不受当前滚动条位置的影响。

在IE 11，Edge，Firefox和Chrome以及适用于Android的Chrome和适用于Android的Firefox的代码段中进行了测试。似乎比使用marginTop两个div元素要好得多。

div
position: fixed
$(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;
  });
});

相关问题
最新问题