如何在全屏模式下水平滚动?

时间:2018-06-27 09:12:09

标签: javascript html css asp.net-mvc fullscreen

更新: 修好了! 我最终将包含表格的Div的宽度和高度增加了100%,这使“全屏”完美地贴在屏幕上,使我也可以看到以前无法看到的两个滚动条。 感谢那些试图帮助我的人!

我有一个div,里面有table,并且div进入了全屏模式,table很大,所以您看不到全部内容全屏显示,所以我需要滚动功能才能工作。

垂直滚动在全屏模式下有效,但水平滚动屏不起作用,有人知道如何使其在全屏模式下与水平滚动屏一起工作吗?

这是一个ASP.NET MVC应用程序。

我用来使div全屏显示的方法:

    function fullscreenActivate() {
    var i = document.getElementById("overviewDiv");

    if (i.requestFullscreen) {
        i.requestFullscreen();
    } else if (i.webkitRequestFullscreen) {
        i.webkitRequestFullscreen();
    } else if (i.mozRequestFullScreen) {
        i.mozRequestFullScreen();
    } else if (i.msRequestFullscreen) {
        i.msRequestFullscreen();
    }
}

div(表是动态加载的,table中没什么特别的):

<div id="overviewDiv">
    Loading...
</div>

我在CSS上拥有的div

    overflow-x: scroll;
    overflow-y: scroll;

1 个答案:

答案 0 :(得分:0)

我不确定我是否理解这个问题,但是:  1)您需要有2个div的一个父级,其屏幕尺寸为1个,而表的尺寸应大于当前div的尺寸  2)您不需要js将父div设置为全屏,您可以使用width:100vw和height:100vh  3)您可以将父div设置为溢出:滚动

在此示例中,我将父级的宽度/高度设置为px,以更好地理解结果,您应该将其替换为vh / vw。

.parent-div{
  background-color:red;
  /*
  Use this:
  width:100vw;
  height:100vh
  */
  width:500px;
  height:400px;
  overflow:scroll;
}
.child-div{
  background:green;
  height:300px;
  width:3000px;

}

希望这对您有用:https://codepen.io/frivolta/pen/MXPmoe