Псевдоэлемент не прокручивается, когда он имеет прозрачный фон - PullRequest
Новая
       23

Псевдоэлемент не прокручивается, когда он имеет прозрачный фон

0 голосов
/ 11 декабря 2018

У меня есть текст, отображаемый в элементе ::after psuedo, который я хотел бы прокручивать.Он работает нормально, пока я не изменю фон этого элемента с:

background-color: rgb(0,0,0);

на:

background-color: rgba(0,0,0,0.5);

Есть ли способразрешить прокрутку с прозрачным фоном?

Вот пример HTML с работающим и неработающим примером: 

<div class="wrapper">

  <div class="column working">
    <p>Working: text is scrolling properly.</p><br>
    <div class="container">
      <img src="https://source.unsplash.com/random/400x200" />
    </div>
  </div>

  <div class="column broken">
    <p>Broken: text is not scrolling.</p><br>
    <div class="container">
      <img src="https://source.unsplash.com/random/400x200" />
    </div>
  </div>

</div>

И CSS для этого: 

* {
  margin: 0;
  padding: 0;

}

.wrapper {
  display: flex;
}

.column {
  padding: 1rem;
  background: yellowgreen;
}

.container {
  display: inline-block;
  position: relative;
  font-family: monaco;
}

.container::after {
  content: "Dis iusto aliquid sollicitudin iaculis modi fugit, non irure quisquam molestiae arius laboris, eiusmod? Pulvinar eleifend volutpat, quae nunc magnam? Hac, nam? Dignissimos esse diamlorem dolore accusamus dolores, ipsa facilis ullam illo, fames ex? Maecenas tellus. Aspernatur eum malesuada, assumenda, hac, ultricies? Aliquet in, harum fugiat! Volutpat recusandae! Fames saepe fames corrupti.";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: inherit;
  height: inherit;
  padding: 1rem;
  z-index: 10;
  overflow-x: scroll;
  cursor: pointer;
  font-family: monaco;
  line-height: 1.5em;
  color: aqua;
}

.column.working .container::after {
  background-color: rgb(0,0,0);
}

.column.broken .container::after {
  background-color: rgba(0,0,0,0.5);
}

img {
  display: block;
}

p {
  font-family: monaco;
}

А вот код выше, в CodePen

Спасибо.

1 Ответ

0 голосов
/ 11 декабря 2018

Вы можете попробовать использовать другой псевдоэлемент для фона: 

* {
  margin: 0;
  padding: 0;
}

.wrapper {
  display: flex;
}

.column {
  padding: 1rem;
  background: yellowgreen;
}

.container {
  display: inline-block;
  position: relative;
  font-family: monaco;
}

.container::after {
  content: "Dis iusto aliquid sollicitudin iaculis modi fugit, non irure quisquam molestiae arius laboris, eiusmod? Pulvinar eleifend volutpat, quae nunc magnam? Hac, nam? Dignissimos esse diamlorem dolore accusamus dolores, ipsa facilis ullam illo, fames ex? Maecenas tellus. Aspernatur eum malesuada, assumenda, hac, ultricies? Aliquet in, harum fugiat! Volutpat recusandae! Fames saepe fames corrupti.";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1rem;
  z-index: 10;
  overflow-x: scroll;
  cursor: pointer;
  font-family: monaco;
  line-height: 1.5em;
  color: aqua;
}

.column .container::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

img {
  display: block;
}

p {
  font-family: monaco;
}
<div class="wrapper">

  <div class="column">
    <p>Broken: text is not scrolling.</p><br>
    <div class="container">
      <img src="https://source.unsplash.com/random/400x200" />
    </div>
  </div>

</div>
...