Как выполнить горизонтальную прокрутку в полноэкранном режиме? - PullRequest
Новая
       7

Как выполнить горизонтальную прокрутку в полноэкранном режиме?

0 голосов
/ 27 июня 2018

UPDATE: Исправлено! В итоге я добавил 100% к ширине и высоте элемента Div, содержащего таблицу, что позволило полноэкранному прилипанию к экрану идеально отображать обе полосы прокрутки, которых я раньше не мог. Спасибо за людей, которые пытались мне помочь!

У меня 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 голосов
/ 27 июня 2018

Я не уверен, что понял вопрос, но: 1) У вас должно быть 2 родителя одного div с размером экрана, 1 с таблицей больше, чем текущий div 2) Вам не нужно js, чтобы установить родительский div на полный экран, вы можете просто использовать width: 100vw и height: 100vh 3) Вы можете установить переполнение родительского div: scroll

В этом примере я устанавливаю ширину / высоту родительского элемента в пикселях просто для лучшего понимания результата, который вы должны заменить на 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

...