Переполнение-у полосы прокрутки оставить пробел на полях - PullRequest
Новая
       2

Переполнение-у полосы прокрутки оставить пробел на полях

0 голосов
/ 12 октября 2018

У меня есть следующий код:

HTML 

<body leftmargin="0" topmargin="0" bgcolor="#ffffff" marginheight="0" marginwidth="0">

<div class="container-fluid h-100">

    <!-- Logo -->
    <div class="row align-top h-100">
        <div class="col-md-1 text-center my-auto">
            <img src=https://vignette.wikia.nocookie.net/project-pokemon/images/4/47/Placeholder.png/revision/latest/scale-to-width-down/480?cb=20170330235552 border="0" style="max-height:100px">
        </div>

        <!-- Menu -->
        <div class="col-md-2 text-center my-auto">
            <div class="container">
                <div class="row">
                    <div class="col"><b>Menu1</b></div>
                </div>
                <div class="row">
                    <div class="col linkBlack">Menu2</div>
                </div>
                <div class="row">
                    <div class="col">Menu3</div>
                </div>
            </div>
        </div>

        <!-- Grid -->
        <div class="col-md-9 img-grid text-center" >
            <div class="container-fluid h-100 img-grid" style="overflow-y: scroll">

                <div class="row">
                    <div class="col-md-4 d-table img-grid" style="background-image: url(https://vignette.wikia.nocookie.net/project-pokemon/images/4/47/Placeholder.png/revision/latest/scale-to-width-down/480?cb=20170330235552); background-size: cover; background-position: center; height:280px;">
                        <div class="text-inv" style="display: table-cell; height: 280px; vertical-align: middle;">Nome</br>Produtor</br>Data</div>
                    </div>
                    <div class="col-md-4 d-table img-grid" style="background-image: url(https://vignette.wikia.nocookie.net/project-pokemon/images/4/47/Placeholder.png/revision/latest/scale-to-width-down/480?cb=20170330235552); background-size: cover; background-position: center; height:280px;">
                        <div class="text-inv" style="display: table-cell; height: 280px; vertical-align: middle;">Nome</br>Produtor</br>Data</div>
                    </div>
                    <div class="col-md-4 d-table img-grid" style="background-image: url(https://vignette.wikia.nocookie.net/project-pokemon/images/4/47/Placeholder.png/revision/latest/scale-to-width-down/480?cb=20170330235552); background-size: cover; background-position: center; height:280px;">
                        <div class="text-inv" style="display: table-cell; height: 280px; vertical-align: middle;">Nome</br>Produtor</br>Data</div>
                    </div>
                </div>


                <div class="row">
                    <div class="col-md-4 d-table img-grid" style="background-image: url(https://vignette.wikia.nocookie.net/project-pokemon/images/4/47/Placeholder.png/revision/latest/scale-to-width-down/480?cb=20170330235552); background-size: cover; background-position: center; height:280px;">
                        <div class="text-inv" style="display: table-cell; height: 280px; vertical-align: middle;">Nome</br>Produtor</br>Data</div>
                    </div>
                    <div class="col-md-4 d-table img-grid" style="background-image: url(https://vignette.wikia.nocookie.net/project-pokemon/images/4/47/Placeholder.png/revision/latest/scale-to-width-down/480?cb=20170330235552); background-size: cover; background-position: center; height:280px;">
                        <div class="text-inv" style="display: table-cell; height: 280px; vertical-align: middle;">Nome</br>Produtor</br>Data</div>
                    </div>
                    <div class="col-md-4 d-table img-grid" style="background-image: url(https://vignette.wikia.nocookie.net/project-pokemon/images/4/47/Placeholder.png/revision/latest/scale-to-width-down/480?cb=20170330235552); background-size: cover; background-position: center; height:280px;">
                        <div class="text-inv" style="display: table-cell; height: 280px; vertical-align: middle;">Nome</br>Produtor</br>Data</div>
                    </div>
                </div>


                <div class="row">
                    <div class="col-md-4 d-table img-grid" style="background-image: url(https://vignette.wikia.nocookie.net/project-pokemon/images/4/47/Placeholder.png/revision/latest/scale-to-width-down/480?cb=20170330235552); background-size: cover; background-position: center; height:280px;">
                        <div class="text-inv" style="display: table-cell; height: 280px; vertical-align: middle;">Nome</br>Produtor</br>Data</div>
                    </div>
                    <div class="col-md-4 d-table img-grid" style="background-image: url(https://vignette.wikia.nocookie.net/project-pokemon/images/4/47/Placeholder.png/revision/latest/scale-to-width-down/480?cb=20170330235552); background-size: cover; background-position: center; height:280px;">
                        <div class="text-inv" style="display: table-cell; height: 280px; vertical-align: middle;">Nome</br>Produtor</br>Data</div>
                    </div>
                    <div class="col-md-4 d-table img-grid" style="background-image: url(https://vignette.wikia.nocookie.net/project-pokemon/images/4/47/Placeholder.png/revision/latest/scale-to-width-down/480?cb=20170330235552); background-size: cover; background-position: center; height:280px;">
                        <div class="text-inv" style="display: table-cell; height: 280px; vertical-align: middle;">Nome</br>Produtor</br>Data</div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-4 d-table img-grid" style="background-image: url(https://vignette.wikia.nocookie.net/project-pokemon/images/4/47/Placeholder.png/revision/latest/scale-to-width-down/480?cb=20170330235552); background-size: cover; background-position: center; height:280px;">
                        <div class="text-inv" style="display: table-cell; height: 280px; vertical-align: middle;">Nome</br>Produtor</br>Data</div>
                    </div>
                    <div class="col-md-4 d-table img-grid" style="background-image: url(https://vignette.wikia.nocookie.net/project-pokemon/images/4/47/Placeholder.png/revision/latest/scale-to-width-down/480?cb=20170330235552); background-size: cover; background-position: center; height:280px;">
                        <div class="text-inv" style="display: table-cell; height: 280px; vertical-align: middle;">Nome</br>Produtor</br>Data</div>
                    </div>
                    <div class="col-md-4 d-table img-grid" style="background-image: url(https://vignette.wikia.nocookie.net/project-pokemon/images/4/47/Placeholder.png/revision/latest/scale-to-width-down/480?cb=20170330235552); background-size: cover; background-position: center; height:280px;">
                        <div class="text-inv" style="display: table-cell; height: 280px; vertical-align: middle;">Nome</br>Produtor</br>Data</div>
                    </div>
                </div>


            </div>

        </div>
    </div>
</div>

</body>

CSS 

.row {   margin: 0 !important; }

.img-grid {   padding-right: 0 !important;   padding-left: 0 !important; }

.text-inv {   opacity: 0;   transition: all 1s ease-in-out; }

.text-inv:hover {   background-color: white;   opacity: 1;   transition: all 1s ease-in-out; }

Не удалосьопубликуйте его на jsfiddle, потому что он не работает с overflow-y, а фрагмент кода не покажет проблему с overflow-y.

Imgs:

https://prnt.sc/l5d8ip/ https://prnt.sc/l5d8nb

Поскольку я использую overflow-y, у контейнера справа будет свиток, но этот свиток будет удален от поля, оставляя пробел, есть ли способ сделать overflow-yпрокрутка стала придерживаться поля?

Я использую overflow-y soo объекты слева не будут двигаться, когда прокрутка будет выполнена.Если у вас есть какой-либо способ воспроизвести этот эффект таким образом, что полоса прокрутки будет привязана к полю, который не будет включать overflow-y, это также будет работать

1 Ответ

0 голосов
/ 12 октября 2018

Зазор с правой стороны - это правый отступ элемента контейнера.Фрагмент, приведенный ниже, удаляет, просто устанавливая отступ для этого элемента на ноль.Нажмите на ссылку полной страницы во фрагменте, чтобы развернуть ее. 

.row {
  margin: 0 !important;
}

.img-grid {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.text-inv {
  opacity: 0;
  transition: all 1s ease-in-out;
}

.text-inv:hover {
  background-color: white;
  opacity: 1;
  transition: all 1s ease-in-out;
}

body > .container-fluid {
  padding-right: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<body leftmargin="0" topmargin="0" bgcolor="#ffffff" marginheight="0" marginwidth="0">

  <div class="container-fluid h-100">

    <!-- Logo -->
    <div class="row align-top h-100">
      <div class="col-md-1 text-center my-auto">
        <img src=https://vignette.wikia.nocookie.net/project-pokemon/images/4/47/Placeholder.png/revision/latest/scale-to-width-down/480?cb=20170330235552 border="0" style="max-height:100px">
      </div>

      <!-- Menu -->
      <div class="col-md-2 text-center my-auto">
        <div class="container">
          <div class="row">
            <div class="col"><b>Menu1</b></div>
          </div>
          <div class="row">
            <div class="col linkBlack">Menu2</div>
          </div>
          <div class="row">
            <div class="col">Menu3</div>
          </div>
        </div>
      </div>

      <!-- Grid -->
      <div class="col-md-9 img-grid text-center">
        <div class="container-fluid h-100 img-grid" style="overflow-y: scroll">

          <div class="row">
            <div class="col-md-4 d-table img-grid" style="background-image: url(https://vignette.wikia.nocookie.net/project-pokemon/images/4/47/Placeholder.png/revision/latest/scale-to-width-down/480?cb=20170330235552); background-size: cover; background-position: center; height:280px;">
              <div class="text-inv" style="display: table-cell; height: 280px; vertical-align: middle;">Nome</br>Produtor</br>Data</div>
            </div>
            <div class="col-md-4 d-table img-grid" style="background-image: url(https://vignette.wikia.nocookie.net/project-pokemon/images/4/47/Placeholder.png/revision/latest/scale-to-width-down/480?cb=20170330235552); background-size: cover; background-position: center; height:280px;">
              <div class="text-inv" style="display: table-cell; height: 280px; vertical-align: middle;">Nome</br>Produtor</br>Data</div>
            </div>
            <div class="col-md-4 d-table img-grid" style="background-image: url(https://vignette.wikia.nocookie.net/project-pokemon/images/4/47/Placeholder.png/revision/latest/scale-to-width-down/480?cb=20170330235552); background-size: cover; background-position: center; height:280px;">
              <div class="text-inv" style="display: table-cell; height: 280px; vertical-align: middle;">Nome</br>Produtor</br>Data</div>
            </div>
          </div>


          <div class="row">
            <div class="col-md-4 d-table img-grid" style="background-image: url(https://vignette.wikia.nocookie.net/project-pokemon/images/4/47/Placeholder.png/revision/latest/scale-to-width-down/480?cb=20170330235552); background-size: cover; background-position: center; height:280px;">
              <div class="text-inv" style="display: table-cell; height: 280px; vertical-align: middle;">Nome</br>Produtor</br>Data</div>
            </div>
            <div class="col-md-4 d-table img-grid" style="background-image: url(https://vignette.wikia.nocookie.net/project-pokemon/images/4/47/Placeholder.png/revision/latest/scale-to-width-down/480?cb=20170330235552); background-size: cover; background-position: center; height:280px;">
              <div class="text-inv" style="display: table-cell; height: 280px; vertical-align: middle;">Nome</br>Produtor</br>Data</div>
            </div>
            <div class="col-md-4 d-table img-grid" style="background-image: url(https://vignette.wikia.nocookie.net/project-pokemon/images/4/47/Placeholder.png/revision/latest/scale-to-width-down/480?cb=20170330235552); background-size: cover; background-position: center; height:280px;">
              <div class="text-inv" style="display: table-cell; height: 280px; vertical-align: middle;">Nome</br>Produtor</br>Data</div>
            </div>
          </div>


          <div class="row">
            <div class="col-md-4 d-table img-grid" style="background-image: url(https://vignette.wikia.nocookie.net/project-pokemon/images/4/47/Placeholder.png/revision/latest/scale-to-width-down/480?cb=20170330235552); background-size: cover; background-position: center; height:280px;">
              <div class="text-inv" style="display: table-cell; height: 280px; vertical-align: middle;">Nome</br>Produtor</br>Data</div>
            </div>
            <div class="col-md-4 d-table img-grid" style="background-image: url(https://vignette.wikia.nocookie.net/project-pokemon/images/4/47/Placeholder.png/revision/latest/scale-to-width-down/480?cb=20170330235552); background-size: cover; background-position: center; height:280px;">
              <div class="text-inv" style="display: table-cell; height: 280px; vertical-align: middle;">Nome</br>Produtor</br>Data</div>
            </div>
            <div class="col-md-4 d-table img-grid" style="background-image: url(https://vignette.wikia.nocookie.net/project-pokemon/images/4/47/Placeholder.png/revision/latest/scale-to-width-down/480?cb=20170330235552); background-size: cover; background-position: center; height:280px;">
              <div class="text-inv" style="display: table-cell; height: 280px; vertical-align: middle;">Nome</br>Produtor</br>Data</div>
            </div>
          </div>

          <div class="row">
            <div class="col-md-4 d-table img-grid" style="background-image: url(https://vignette.wikia.nocookie.net/project-pokemon/images/4/47/Placeholder.png/revision/latest/scale-to-width-down/480?cb=20170330235552); background-size: cover; background-position: center; height:280px;">
              <div class="text-inv" style="display: table-cell; height: 280px; vertical-align: middle;">Nome</br>Produtor</br>Data</div>
            </div>
            <div class="col-md-4 d-table img-grid" style="background-image: url(https://vignette.wikia.nocookie.net/project-pokemon/images/4/47/Placeholder.png/revision/latest/scale-to-width-down/480?cb=20170330235552); background-size: cover; background-position: center; height:280px;">
              <div class="text-inv" style="display: table-cell; height: 280px; vertical-align: middle;">Nome</br>Produtor</br>Data</div>
            </div>
            <div class="col-md-4 d-table img-grid" style="background-image: url(https://vignette.wikia.nocookie.net/project-pokemon/images/4/47/Placeholder.png/revision/latest/scale-to-width-down/480?cb=20170330235552); background-size: cover; background-position: center; height:280px;">
              <div class="text-inv" style="display: table-cell; height: 280px; vertical-align: middle;">Nome</br>Produtor</br>Data</div>
            </div>
          </div>


        </div>

      </div>
    </div>
  </div>

</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...