Неправильное поведение прокрутки при использовании фонового клипа

#html #css #background-clip

#HTML #css — код #фоновый клип

Вопрос:

При использовании background-clip: text и -*-text-fill-color: transparent; вместе с overflow: auto прокруткой в Firefox она несовместима, и, похоже, она вообще не прокручивается в Chrome (обе macOS). Похоже, есть проблемы с рендерингом.

Я попытался изменить фоновое вложение, добавив преобразование (для запуска графического процессора), но, похоже, ничего не сработало.

 body {
  background: #369;
  color: #fff;
}

.wrap {
  height: 50vh;
  overflow: auto;
  font: 26px / 1.5 sans-serif;
  background-image: linear-gradient(180deg, transparent 0, currentColor 30%, currentColor 70%, transparent 100%);
  background-color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  -moz-text-fill-color: transparent;
  -webkit-text-fill-color: transparent;
}

 <div class="wrap">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!
</div>

Развернуть фрагмент

Демо-версия: https://jsfiddle.net/wdpmohcL/2 /

Ответ №1:

Прокрутка работает, если вы добавляете background-attachment: local :

 body {
  background: #369;
  color: #fff;
}

.wrap {
  height: 50vh;
  overflow: auto;
  font: 26px / 1.5 sans-serif;
  background-image: linear-gradient(180deg, transparent 0, currentColor 30%, currentColor 70%, transparent 100%);
  background-color: transparent;
  background-clip: text;
  background-attachment: local;
  -webkit-background-clip: text;
  -moz-text-fill-color: transparent;
  -webkit-text-fill-color: transparent;
}

 <div class="wrap">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!
</div>

Развернуть фрагмент

Ответ №2:

 body {
  background: #369;/*bg color*/
  color: #fff;
}
.wrap {
  overflow: auto;
  width: 100%;
  height: 50vh;
  display: inline-block;
  margin: 10px;/*x*/
  position: relative;
  font: 26px / 1.5 sans-serif;
  -ms-overflow-style: none;  /* IE and Edge ,hide scroll bar*/
  scrollbar-width: none;  /* Firefox ,hide scroll bar*/
}
.wrap::-webkit-scrollbar {
  display: none;/*hide scroll bar*/
}

.dwn{

  height: 15vh;/*y*/
  width: 100%;
  bottom: 15vh;/*y*/
  position: relative;
  background: linear-gradient( transparent 0%,#369/*use same color as bg*/ 100%);
  background: -webkit-linear-gradient( transparent 0%,#369/*use same color as bg*/ 100%);

}
.upn{

  height: 15vh;/*y*/
  width: 100%;
  top: 10px;/*x*/
  position: absolute;
  z-index: 100;
  background: linear-gradient( #369/*use same color as bg*/ 0%, transparent 100%);
  background: -webkit-linear-gradient( #369/*use same color as bg*/ 0%, transparent 100%);
}

     <div class="tl">
    <div class="upn">
  </div>
      <div class="wrap" id="prisonerResponse">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus,
        ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt
        aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi
        blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing
        elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at
        distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum
        delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet,
        consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci,
        aspernatur minima nobis at distinctio eveniet sunt aliquid, iure
        laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis
        veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio
        eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus
        ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur
        adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima
        nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus
        dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor
        sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci,
        aspernatur minima nobis at distinctio eveniet sunt aliquid, iure
        laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis
        veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio
        eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus
        ipsa, sequi blanditiis veritatis! Lorem ipsum dolor sit amet,
        consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci,
        aspernatur minima nobis at distinctio eveniet sunt aliquid, iure
        laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis
        veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio
        eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus
        ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur
        adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima
        nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus
        dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor
        sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci,
        aspernatur minima nobis at distinctio eveniet sunt aliquid, iure
        laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis
        veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio
        eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus
        ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur
        adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima
        nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus
        dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor
        sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci,
        aspernatur minima nobis at distinctio eveniet sunt aliquid, iure
        laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis
        veritatis! Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio
        eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus
        ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur
        adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima
        nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus
        dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor
        sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci,
        aspernatur minima nobis at distinctio eveniet sunt aliquid, iure
        laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis
        veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio
        eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus
        ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur
        adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima
        nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus
        dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor
        sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci,
        aspernatur minima nobis at distinctio eveniet sunt aliquid, iure
        laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis
        veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio
        eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus
        ipsa, sequi blanditiis veritatis! Lorem ipsum dolor sit amet,
        consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci,
        aspernatur minima nobis at distinctio eveniet sunt aliquid, iure
        laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis
        veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio
        eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus
        ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur
        adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima
        nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus
        dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor
        sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci,
        aspernatur minima nobis at distinctio eveniet sunt aliquid, iure
        laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis
        veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio
        eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus
        ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur
        adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima
        nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus
        dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor
        sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci,
        aspernatur minima nobis at distinctio eveniet sunt aliquid, iure
        laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis
        veritatis! Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio
        eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus
        ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur
        adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima
        nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus
        dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor
        sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci,
        aspernatur minima nobis at distinctio eveniet sunt aliquid, iure
        laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis
        veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio
        eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus
        ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur
        adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima
        nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus
        dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor
        sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci,
        aspernatur minima nobis at distinctio eveniet sunt aliquid, iure
        laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis
        veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio
        eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus
        ipsa, sequi blanditiis veritatis!
      </div>
      <div class="dwn">
      </div>
    </div>

Развернуть фрагмент

👆👆👆 Запустите его НА ВСЮ СТРАНИЦУ

Здесь мы

внесите в него некоторые изменения, используя position amp; display , который делает его прокручиваемым, а также динамически исчезает сверху и снизу
скрыть полосу прокрутки (это работает даже без скрытия полосы прокрутки!)
поскольку мы скрываем полосу прокрутки, наведите курсор мыши на текст и прокрутите
мы заставили его работать в Firefox с помощью классов .dwn,.upn div , таким образом, наведите курсор мыши на center текст и прокрутите вниз

Стакблитц Code-https://stackblitz.com/edit/web-platform-1cfdsj?file=index.html
Демо-версия-https://веб-платформа-1cfdsj.stackblitz.io

1. Он не прокручивается в Firefox.

2. пожалуйста, скажите, что именно происходит, вы не можете прокручивать / вы не видите градиент / невидимую полосу прокрутки / все невидимое. Я могу решить, добавив свойство -moz- to, я думаю

3. Внешний вид такой же, как в Chrome, но в Firefox невозможно прокручивать по вертикали ни с помощью колеса мыши, ни с помощью клавиш со стрелками.

4.наведите курсор мыши на текст и прокрутите в Chrome, потому что я скрыл полосу прокрутки, теперь я отредактировал сообщение

5. ТЕПЕРЬ это будет РАБОТАТЬ в firefox!!! ПОПРОБУЙТЕ! (обязательно наведите указатель мыши на центр текста и прокрутите вниз)

Ответ №3:

Попробуйте использовать:

.wrap { height: 50vh; overflow: auto; font: 26px / 1.5 sans-serif; mask-image: linear-gradient(180deg, transparent 0, currentColor 30%, currentColor 70%, transparent 100%); -webkit-mask-image: linear-gradient(180deg, transparent 0, currentColor 30%, currentColor 70%, transparent 100%); }

Ответ №4:

Проблема заключалась в том, что фон не был зафиксирован относительно «содержимого элемента». Использование: background-attachment: local; поможет сделать фон фиксированным относительно содержимого элемента.

Добавить background-attachment: local ; к wrap class .