Прямо к делу, есть очень распространенная ситуация для некоторых прокручиваемых элементов. Обычно при прокрутке добавляется тень в сторону, перпендикулярную прокрутке, чтобы указать, что в данный момент есть элемент, который прокручивается до прокрутки из видимой области, например:
Как видите, в процессе прокрутки появится тень:
Для проблемы, связанной с тем, что столбцы с обеих сторон неподвижны и адсорбируются на границе во время процесса прокрутки, обычно CSS используетposition: stickyЭто можно решить.
Однако для тени, которая появляется только во время процесса прокрутки (контент в контейнере прокрутки не прокручивается, тень появляется и исчезает, когда контент прокручивается), предыдущая практика всегда выполнялась с помощью JS. .
Итак, есть ли решение, которое можно реализовать с помощью чистого CSS? Эй, да. Есть очень хитрый трюк, давайте раскрывать его шаг за шагом.
волшебныйbackground-attachment
Чтобы реализовать приведенную выше тень прокрутки с использованием чистого CSS, необходимо использовать основные элементы:background-attachment.
В предыдущей статье -CSS реализует эффект параллакса, который подробно описывает подробноbackground-attachment, с помощьюbackground-attachment: fixedВы можете просто реализовать параллакс прокрутки веб-сайта или эффект водяного знака, похожий на щелчок по изображению, например:
Конечно, наш сегодняшний герой неbackground-attachment: fixed, ноbackground-attachment: srcoll.
background-attachment: srcoll
Во-первых, позвольте мне представитьbackground-attachment,если указаноbackground-image,Такbackground-attachmentОпределяет, фиксируется ли фон в области просмотра или прокручивается вместе с содержащим его блоком.
Проще говоря, он определяет, как фоновый узор перемещается в прокручиваемом контейнере. С помощью двух простых демонстраций вы пойметеbackground-attachment: srcollа такжеbackground-attachment: local.
background-attachment: local, это согласуется с нашим повседневным использованием, фоновый рисунок прокручиваемого контейнера прокручивается вместе с контейнером:
!
background-attachment: scroll, этот — сегодняшний главный герой, который показывает, что фон фиксируется относительно самого элемента, а не прокручивается вместе с его содержимым:
Если вы не разобрались в чем между ними разница, то можете ткнуть в следующее DEMO и ощутить это на себе:
CodePen Demo -- bg-attachment Demo
srcollа такжеlocalИспользуйте одновременно, чтобы добиться слепоты
В этот момент многие ученики все еще могут быть в замешательстве, что же нам делать? Какое это имеет отношение к тени прокрутки этой статьи?
Не волнуйтесь, сложность скользящих теней заключается в том, что при отсутствии прокрутки изначально тени не отображаются, и только когда прокрутка начнется, тени появятся.
Итак, здесь мы используемbackground-attachment: srcollа такжеbackground-attachment: localДля двух свойств в начале прокрутки используйте два слоя фона для наложения вместе, чтобы скрыть теневой фон.При фактической прокрутке удалите наложенную часть и пропускайте только теневую часть.
Эм? В чем смысл. Мы используем его для прокрутки контейнера, добавления двух эффектов градиента и их применения соответственно.background-attachment: srcollа такжеbackground-attachment: local, а затем сложите их следующим образом:
<!-- 可滚动容器 -->
<ul>
<li>...</li>
...
<li>...</li>
</ul>
// 情形一：
.g-one {
background: linear-gradient(#fff, #f00);
background-size: 100% 10px;
background-repeat: no-repeat;
background-attachment: local;
}
// 情形二：
.g-two {
background: radial-gradient(at 50% 0, #000, #0f0 70%);
background-size: 100% 10px;
background-repeat: no-repeat;
background-attachment: scroll;
}
// 情形三：
.g-combine {
background:
linear-gradient(#fff, #f00),
radial-gradient(at 50% 0%, #000, #0f0 70%);
background-size: 100% 10px, 100% 10px;
background-repeat: no-repeat;
background-attachment: local, scroll;
}
Собственно эффект такой, один фон прокручивается вместе с контейнером, а другой фиксируется вместе с контейнером. Фон, который прокручивается вместе с контейнером, действует как начальная маска:
ОК, вы можете видеть, что при прокрутке последний случай накладывается, на самом деле мы прокручиваем, когда нужно показать другой цвет (тень) эффект. Настраиваем двухцветный градиент, слой маски (background-attachment: local) белый, а затем фиксированный теневой слой (background-attachment: scroll), используя радиальный градиент для имитации желаемого цвета тени.
Код CSS выглядит следующим образом:
.g-final {
background:
linear-gradient(#fff, transparent 100%),
linear-gradient(rgba(0, 0, 0, .5), transparent 100%);
background-size: 100% 50px, 100% 10px;
background-repeat: no-repeat;
background-attachment: local, scroll;
}
использоватьlinear-gradient(rgba(0, 0, 0, .5), transparent 100%)Линейный градиент имитирует оттенок серого:
Хорошо, все готово. Для всех вышеуказанных DEMO вы можете щелкнуть здесь, чтобы увидеть:
CodePen Demo -- Pure CSS Scroll shadow
Как показано в начале статьи, этот прием можно использовать и непосредственно вtableв:
CodePen Demo -- Pure CSS Table scroll shadow
некоторые проблемы
Каскадный порядок
Конечно, в вышеупомянутом процессе всегда была проблема, то есть потому, что фон используетсяbackgroundСмоделированная тень, по сути, окончательный эффект, содержимое находится в тени (над фоном), но фактический эффект не сильно отличается, если вы можете это вынести, это решение вполне пригодно для использования.
совместимость
Ну, конечно, есть еще один вопрос, которыйbackground-attachmentпроблемы совместимости. покажи намCAN I USE:
Комментарии ниже Могу ли я использовать, указывают на то, что большинство проблем совместимости на самом деле находятся вbackground-attachment: fixed, мало влияет на эффект этой бумаги.
наконец
Техника этой статьи не оригинальна, и первый раз я ее увидел именно из этой статьи:Изучение практической ценности CSS-свойства *-gradient, и проведите небольшое исследование о том, можно ли его использовать на практике.
Что ж, на этом статья заканчивается.
Другие замечательные технические статьи по CSS собраны в моемGithub -- iCSS, продолжайте обновлять, добро пожаловать, нажмите звездочку, чтобы подписаться на коллекцию.
Если у вас есть какие-либо вопросы или предложения, вы можете общаться больше.Оригинальные статьи ограничены в написании и знаниях.Если в статье есть какие-либо неточности, пожалуйста, дайте мне знать.