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

标签 javascript css fullscreen

我正在尝试使用 javscript 获得全屏模式。所以我找到了this回答并处理它。但我发现,当我使用此代码 触发全屏时,滚动条消失并且滚动被禁用。但是,如果我使用 F11 触发相同的操作,则会出现滚动条并且可以滚动。 我曾尝试将 overflow:auto 提供给正文,但它没有任何效果。 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}");
    }
  }
}

最佳答案

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

var el = document.documentElement;

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

关于javascript - 触发全屏模式时在网页中禁用滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45031687/

相关文章:

javascript - history.back() 不会在 Chrome/FireFox 中更新 location.hash

firefox - 在 elm 中使用端口的全屏 API 在 Firefox 中不起作用

javascript - 找到一个特定的词并用 span 标签包装

javascript - webpack 别名未按 React 类函数中的预期解析

javascript - 如何在 Express.js 中使用 Less?

javascript - jQuery 悬停图像的特定区域

javascript - 似乎无法将已翻译 270 度的文本水平居中?

google-chrome - 如何(破解和)将 Google Docs 绘图窗口最大化到全屏?

java - 当 JOptionPane.showMessageDialog 时停止全屏窗口最小化?

javascript - Firefox 鼠标移动事件.which