触发全屏模式时在网页中禁用滚动

Question

我正在尝试使用 javscript 获得全屏模式。所以我找到了 this 答案并正在研究它。但我发现，当我使用此 code 触发全屏时，滚动条消失并且滚动被禁用。但是，如果我使用 F11 触发相同的操作，则会出现滚动条并且可以滚动。我曾尝试将 overflow:auto 赋给 body，但它没有任何效果。 Here 是重现相同问题的 fiddle。当您运行 fiddle 您将能够看到所有段落都不可见。

注意：我使用的是 Firefox 45。

HTML :

<body>
      <input type="button" value="click to go fullscreen" onclick="requestFullScreen()">
      <p>
       1 some text to make screnn bigger
      </p>
        <p>
         2some text to make screnn bigger
      </p>
        <p>
       3 some text to make screnn bigger
      </p>
        <p>
        4some text to make screnn bigger
      </p>
        <p>
        5some text to make screnn bigger
      </p>
        <p>
       6 some text to make screnn bigger
      </p>
        <p>
        7some text to make screnn bigger
      </p>  <p>
       8 some text to make screnn bigger
      </p>
        <p>
       9 some text to make screnn bigger
      </p>
        <p>
       10 some text to make screnn bigger
      </p>
        <p>
       11some text to make screnn bigger
      </p>
        <p>
        12 some text to make screnn bigger
      </p>
        <p>
        13 some text to make screnn bigger
      </p>
        <p>
       14 some text to make screnn bigger
      </p>
        <p>
       15 some text to make screnn bigger
      </p>
        <p>
        16 some text to make screnn bigger
      </p>
    </body>

Javascript:

function requestFullScreen() {

  var el = document.body;

  // Supports most browsers and their versions.
  var requestMethod = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen;

  if (requestMethod) {

    // Native full screen.
    requestMethod.call(el);

  } else if (typeof window.ActiveXObject !== "undefined") {

    // Older IE.
    var wscript = new ActiveXObject("WScript.Shell");

    if (wscript !== null) {
      wscript.SendKeys("{F11}");
    }
  }
}

Answer 1

将 el 更改为 document.documentElement，滚动将在 Firefox 中正常工作。

var el = document.documentElement;

它会在使用 Chrome 时在 JSFiddle 中中断（我猜是因为 iframe 策略），但我认为这不是主要用途。

触发全屏模式时在网页中禁用滚动

scrolling disabled in the webpage when full screen mode is triggered

javascript

css

fullscreen