Как применить переполнение: скрыто в поле содержимого? - PullRequest
Новая
       21

Как применить переполнение: скрыто в поле содержимого?

2 голосов
/ 31 мая 2019

Я написал следующий код. Прокрутка с этим кодом покажет текст на полях над липким заголовком. Я хочу подавить это. 

body {
  display: flex;
  flex-flow: column;
  height: 100vh;
  margin: 0;
}

header {
  background-color: #f8f;
  flex: none;
  height: 3em;
}

.container {
  display: flex;
  flex: 1 1 auto;
  height: 0;
}

aside {
  background-color: #ddb;
  flex: none;
  width: 200px;
}

.main {
  flex: 1 1 auto;
  overflow: auto;
  padding: 20px;
}

.content {
  background-color: #c9c;
}

.content>h1 {
  background-color: #fa0;
  color: white;
  margin: 0;
  position: sticky;
  top: 0;
}
<header>header</header>
<section class="container">
  <aside>sidebar</aside>
  <main class="main">
    <section class="content">
      <h1>heading1</h1>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>...</div>
      <h1>heading2</h1>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      ...
    </section>
  </main>
</section>

Здесь у меня есть два следующих ограничения.

  • Не перекрывать (псевдо) элементы того же цвета, что и цвет фона на полях
  • Не использовать JavaScript

Учитывая два вышеупомянутых ограничения, я подумал, что если класс кода .content будет обрезан с помощью блока содержимого, он будет работать, как и ожидалось.

Однако, когда я выполнил следующий код, используя clip-path, он не сработал так, как я хотел. 

body {
  display: flex;
  flex-flow: column;
  height: 100vh;
  margin: 0;
}

header {
  background-color: #f8f;
  flex: none;
  height: 3em;
}

.container {
  display: flex;
  flex: 1 1 auto;
  height: 0;
}

aside {
  background-color: #ddb;
  flex: none;
  width: 200px;
}

.main {
  flex: 1 1 auto;
  overflow: auto;
  padding: 20px;
}

.content {
  background-color: #c9c;
  clip-path: content-box; /* ADD */
  height: 100%; /* ADD */
}

.content>h1 {
  background-color: #fa0;
  color: white;
  margin: 0;
  position: sticky;
  top: 0;
}
<header>header</header>
<section class="container">
  <aside>sidebar</aside>
  <main class="main">
    <section class="content">
      <h1>heading1</h1>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>...</div>
      <h1>heading2</h1>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      ...
    </section>
  </main>
</section>

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

body {
  display: flex;
  flex-flow: column;
  height: 100vh;
  margin: 0;
}

header {
  background-color: #f8f;
  flex: none;
  height: 3em;
}

.container {
  display: flex;
  flex: 1 1 auto;
  height: 0;
}

aside {
  background-color: #ddb;
  flex: none;
  width: 200px;
}

.main {
  flex: 1 1 auto;
  overflow: auto;
  padding: 0 20px 20px;  /* CHANGE */
  margin-top: 20px;  /* ADD */
  /* Although it looks as expected, it is not correct because the height of the scroll bar changes with margin. */
}

.content {
  background-color: #c9c;
}

.content>h1 {
  background-color: #fa0;
  color: white;
  margin: 0;
  position: sticky;
  top: 0;
}
<header>header</header>
<section class="container">
  <aside>sidebar</aside>
  <main class="main">
    <section class="content">
      <h1>heading1</h1>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>...</div>
      <h1>heading2</h1>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      ...
    </section>
  </main>
</section>

Проблема в том, что полоса прокрутки находится в поле отступов и не распространяется на поле полей.

Причиной изменения положения полосы прокрутки при использовании свойства margin является структура блочной модели. Таким образом, даже если вы используете свойство border, оно ведет себя так же, как и свойство margin.

Как мне достичь этого в рамках этого ограничения?

редактировать

Я сделал то, что хотел, выполнив следующее.

Однако это также требует применения ширины отступа к градиенту. Это сложно.

Кроме того, это противоречит одному из ограничений, перечисленных выше.

Есть ли другой способ? 

body {
  display: flex;
  flex-flow: column;
  height: 100vh;
  margin: 0;
}

header {
  background-color: #f8f;
  flex: none;
  height: 3em;
}

.container {
  display: flex;
  flex: 1 1 auto;
  height: 0;
}

aside {
  background-color: #ddb;
  flex: none;
  width: 200px;
}

.main {
  flex: 1 1 auto;
  overflow: auto;
  padding: 0 20px 20px;
  position: relative;
}

.content {
  background-color: #c9c;
}

.content > h1 {
  color: white;
  margin: 0;
  position: sticky;
  top: 0;
  background: linear-gradient(to bottom, #fff, #fff 20px, #fa0 20px, #fa0);
  padding-top: 20px;
}
<header>header</header>
<section class="container">
  <aside>sidebar</aside>
  <main class="main">
    <section class="content">
      <h1>heading1</h1>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>...</div>
      <h1>heading2</h1>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      ...
    </section>
  </main>
</section>

1 Ответ

0 голосов
/ 01 июня 2019

Для заголовков установите для свойства top отрицательное значение в размере верхнего отступа прокручиваемой области и задайте им верхнюю границу этой суммы.Затем предоставьте родителю-посреднику отрицательную верхнюю маржу этой суммы. 

body {
  display: flex;
  flex-flow: column;
  height: 100vh;
  margin: 0;
}

header {
  background-color: #f8f;
  flex: none;
  height: 3em;
}

.container {
  display: flex;
  flex: 1 1 auto;
  height: 0;
}

aside {
  background-color: #ddb;
  flex: none;
  width: 200px;
}

.main {
  flex: 1 1 auto;
  overflow: auto;
  padding: 20px;
}

.content {
  background-color: #c9c;
}

.content>h1 {
  background-color: #fa0;
  color: white;
  margin: 0;
  border-top: 20px solid #fff;
  position: sticky;
  top: -20px;
}

.main>.content:first-child {
  margin-top: -20px;
}
<header>header</header>
<section class="container">
  <aside>sidebar</aside>
  <main class="main">
    <section class="content">
      <h1>heading1</h1>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>...</div>
      <h1>heading2</h1>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      ...
    </section>
  </main>
</section>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...