Индикаторы скролла и градиент, изменяющийся при скролле

Сначала мы рассмотрим индикатор горизонтальной прокрутки (скролла), созданный исключительно с использованием CSS. В сети существует несколько аналогичных инструментов, правда все они созданы с использованием JavaScript. Один из таких инструментов - Bloomberg Article Scroll Indicator. Автору описываемого решения было интересно узнать, сможет ли он сделать индикатор прокрутки, как Bloomberg Article Scroll Indicator, только с помощью CSS. Выяснилось, что такое возможно. Правда пришлось использовать различные CSS-хаки, в частности, связанные с z-index и градиентами.

«Использование хаков не всегда является плохой практикой. — утверждает автор — Если вы можете понять, как работает представленный в решении CSS-код, как его изменить под свои нужды и он более приемлем для вас, чем JavaScript, то почему бы его ну использовать в своих проектах.»

Если вы решите воспользоваться этим инструментом имейте в виду, что при использовании отрицательного z-index возможен конфликт с другим CSS-кодом, использующим z-index.

Ознакомиться с работой горизонтального скролла, созданного только на CSS вы можете на codepen

Давайте теперь рассмотрим индикатор вертикального скролла, который можно расположить внутри какого-либо HTML-блока. Этот инструмент называется fakeScroll. Он является очень «легким» (7.7KB в обычном и 4.0KB в сжатом виде) и надежным скриптом для создания кастомного вертикального скролла. Несмотря на то, что кастомизация полосы прокрутки поддерживается CSS, к сожалению, работает не во всех браузерах (особенно в старых версиях). К тому же уровень настройки этих CSS-свойств не является достаточно гибким, чтобы обеспечить креативность или определенные особые потребности разработчика.

Пример разметки:

	<div class="foo">
		...
		...
		...
	</div>

JS-код для инициализации fakeScroll:

document.querySelector('.foo').fakeScroll();

Представленный выше HTML-код преобразуется в следующий вид:

	<div class="foo">
		<div class="fakeScroll__wrap">
			<div class="fakeScroll__content">
				...
				...
				...
			</div>
		</div>
		<div class="fakeScroll__bar"></div>
	</div>

Скрипт, вероятно, не будет работать в браузере IE без использования Babel и ES2015 полизаполнений (Polyfill).

И, наконец, третье решение, носящее чисто эстетический характер – фоновый градиент, изменяющийся при прокрутке страницы.

Автором этого решения является упомянутый в начале заметки создатель индикатора горизонтальной прокрутки. Кстати фоновый градиент сделан на основе его первого инструмента. Градиент работает следующим образом: верхний правый угол градиента изменяется, а нижний правый – остается тем же. Этот эффект достигается путем наложения 2 градиентов. Первый градиент располагается по всей высоте содержимого «сверху вниз». Он состоит из цветов, которые задаете вы. Второй градиент - от верхнего левого края до нижнего правого – это переход от прозрачного до сплошного цвета. Этот градиент привязан к размерам viewport экранов и размещен за текстом, аналогично, как в индикаторе прокрутки, описанном выше.

Для ознакомления с ним снова переходим на codepen

В заключении заметки хотелось бы заметить, что с помощью несложных действий по внедрению описанных выше инструментов в свой сайт или веб-приложение, можно добиться большого положительного эффекта. Это касается не только удобства пользования вашим ресурсом, но и внешней привлекательности его для посетителей.