Полоса прокрутки на изогнутом переполнении-y смещает ее относительно других элементов - PullRequest
Новая
       0

Полоса прокрутки на изогнутом переполнении-y смещает ее относительно других элементов

1 голос
/ 16 июня 2020

Довольно внушительный фрагмент, но это базовый c макет для сайта, над которым я работаю, и проблема на самом деле очень проста - я использую контейнер ширины, такую ​​же ширину на панели навигации и основных элементах - все отлично выравнивается, за исключением случая, когда я использую overflow-y: auto для создания полосы прокрутки на элементе main.

Из-за полосы прокрутки центр основного тела теперь короче на несколько пикселей.

Есть ли способ запретить браузеру автоматически настраивать центр представления при наличии полосы прокрутки?

Я еще не тестировал в других браузерах, но я ' м, видя это на firefox, мне просто интересно, есть ли простое исправление для всех браузеров или это просто то, с чем мы должны жить.

Вот оно с добавленным переполнением:

enter image description here

А вот и без:

enter image description here

Вы можете увидеть белый по центру Часть на панели навигации смещена по центру светло-серой части тела. 

html {
  height: 100%;
  font-size: calc(1em + 1vw);
}

body {
  height: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  display: flex;
  flex-direction: column;
  background-color: #ccc;
  box-sizing: border-box;
}

header {
  display: flex;
  justify-content: center;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 2px;
  z-index: 1000;
}

main {
  display: flex;
  overflow-y: auto;
  justify-content: center;
  flex: 1 0 0px;
}

.navTop-widthContainer {
  max-width: 536px;
  flex: 1 0 0px;
  display: flex;
  background-color: #fff;
}

.navTop {
  display: inline-flex;
  flex-direction: row;
  flex: 1 0 auto;
  flex-shrink: 0;
}

.navTop div {
  display: flex;
}

.floatRight {
  margin-left: auto;
  order: 2;
}

.f-d {
  display: flex;
  flex-direction: column;
}

.f-d div {
  display: flex;
  justify-content: center;
}

.widthContainer {
  max-width: 536px;
  background-color: #eee;
  border-left: solid 1px #ddd;
  border-right: solid 1px #ddd;
  color: #242424;
}
<body>
  <header>
    <div class="navTop-widthContainer">
      <nav id="navTop" class="navTop" role="navigation">
        <div>
          <a href="/Services">Services</a>
          <a href="/Customer">Shopping</a>
        </div>

        <div class="floatRight">
          <a id="register" href="/Identity/Account/Register">Register</a>
          <a id="login" href="/Identity/Account/Login">Login</a>
        </div>
      </nav>
    </div>
  </header>

  <main>
    <div class="widthContainer f-d">
      <div>
        <p>Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill
          text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text
          Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill
          text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text
          Fill text Fill text Fill text Fill text Fill text Fill text</p>
      </div>
    </div>
  </main>
</body>

1 Ответ

1 голос
/ 16 июня 2020

Я сделал небольшую хитрость. Прежде всего, я добавляю overfloy-y: scroll к header, чтобы у него была такая же полоса прокрутки. Как видите: 

html {
  height: 100%;
  font-size: calc(1em + 1vw);
}

body {
  height: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  display: flex;
  flex-direction: column;
  background-color: #ccc;
  box-sizing: border-box;
}

header {
  display: flex;
  justify-content: center;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 2px;
  z-index: 1000;
  overflow-y: scroll;
}

main {
  display: flex;
  overflow-y: auto;
  justify-content: center;
  flex: 1 0 0px;
}

.navTop-widthContainer {
  max-width: 536px;
  flex: 1 0 0px;
  display: flex;
  background-color: #fff;
}

.navTop {
  display: inline-flex;
  flex-direction: row;
  flex: 1 0 auto;
  flex-shrink: 0;
}

.navTop div {
  display: flex;
}

.floatRight {
  margin-left: auto;
  order: 2;
}

.f-d {
  display: flex;
  flex-direction: column;
}

.f-d div {
  display: flex;
  justify-content: center;
}

.widthContainer {
  max-width: 536px;
  background-color: #eee;
  border-left: solid 1px #ddd;
  border-right: solid 1px #ddd;
  color: #242424;
}
<body>
  <header>
    <div class="navTop-widthContainer">
      <nav id="navTop" class="navTop" role="navigation">
        <div>
          <a href="/Services">Services</a>
          <a href="/Customer">Shopping</a>
        </div>

        <div class="floatRight">
          <a id="register" href="/Identity/Account/Register">Register</a>
          <a id="login" href="/Identity/Account/Login">Login</a>
        </div>
      </nav>
    </div>
  </header>

  <main>
    <div class="widthContainer f-d">
      <div>
        <p>Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill
          text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text
          Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill
          text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text
          Fill text Fill text Fill text Fill text Fill text Fill text</p>
      </div>
    </div>
  </main>
</body>

Затем я спрятал полосу прокрутки в header.

(Да, это не работает в Firefox.) 

html {
  height: 100%;
  font-size: calc(1em + 1vw);
}

body {
  height: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  display: flex;
  flex-direction: column;
  background-color: #ccc;
  box-sizing: border-box;
}

header {
  display: flex;
  justify-content: center;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 2px;
  z-index: 1000;
  overflow-y: scroll;
}

header::-webkit-scrollbar{
  visibility:hidden;
}

main {
  display: flex;
  overflow-y: auto;
  justify-content: center;
  flex: 1 0 0px;
}

.navTop-widthContainer {
  max-width: 536px;
  flex: 1 0 0px;
  display: flex;
  background-color: #fff;
}

.navTop {
  display: inline-flex;
  flex-direction: row;
  flex: 1 0 auto;
  flex-shrink: 0;
}

.navTop div {
  display: flex;
}

.floatRight {
  margin-left: auto;
  order: 2;
}

.f-d {
  display: flex;
  flex-direction: column;
}

.f-d div {
  display: flex;
  justify-content: center;
}

.widthContainer {
  max-width: 536px;
  background-color: #eee;
  border-left: solid 1px #ddd;
  border-right: solid 1px #ddd;
  color: #242424;
}
<body>
  <header>
    <div class="navTop-widthContainer">
      <nav id="navTop" class="navTop" role="navigation">
        <div>
          <a href="/Services">Services</a>
          <a href="/Customer">Shopping</a>
        </div>

        <div class="floatRight">
          <a id="register" href="/Identity/Account/Register">Register</a>
          <a id="login" href="/Identity/Account/Login">Login</a>
        </div>
      </nav>
    </div>
  </header>

  <main>
    <div class="widthContainer f-d">
      <div>
        <p>Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill
          text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text
          Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill
          text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text
          Fill text Fill text Fill text Fill text Fill text Fill text</p>
      </div>
    </div>
  </main>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...