ZorNet.Ru — сайт для вебмастера » HTML и CSS » Полоса прокрутки для страниц на CSS

Полоса прокрутки для страниц на CSS

Если решили изменить стиль дизайна полосу прокрутки на веб-странице, есть отличное решение, как пользовательская полосу прокрутки HTML и CSS. Где при установках вы можете самостоятельно изменять стилистику дизайна, а точнее выстроить дизайн, то который требуется на интернет ресурсе или просто отличный подходит под общий стиль сайта. Где ставим ширину и также длину кнопки, плюс стильный цветной переход.

Когда на портале публикуется очень большой материал или длинный абзац на нашем сайте, пользователь прокручивает страницу вниз, чтобы прочитать ее полностью. Если бы мы сделали стильную полосу прокрутки, где взаимодействие с пользователями улучшится, да и вообще сильно меняет обзор сайта.

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

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

Чтоб понять, как реально все выглядит, то вот изображение страницы, после установки CSS. Где заметил, что фон также меняется, и на это нужно обратить внимание.

Исходный код пользовательской полосы прокрутки CSS

Прежде чем делиться исходным кодом, давайте поговорим об этом, где для начала создаем div с ширину 3500px из-за создания прокрутки. Этот эффект будет работать в браузерах WebKit, таких, как Chrome, Safari, Opera. Существует свойство CSS ::-webkit-scrollbarдля настройки полосы прокрутки.

После этого у нас есть еще два свойства::-webkit-scrollbar-thumbи::-webkit-scrollbar-track. Полоса прокрутки для большого пальца предназначена для элемента, который перемещается на свитке, мы также можем перетащить его вверх или вниз.

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

Код

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>CSS Пользовательские Scrollbar</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <h1>ZorNet.Ru — сайт для вебмастера</h1>

</body>
</html>

CSS

Код

/** CSS Custom Scrollbar **/
::-webkit-scrollbar {
  width: 25px;
}

::-webkit-scrollbar-thumb {
  border-radius: 25px;
  background: -webkit-gradient(linear,left top,left bottom,from(#e27e08),to(#b7104c));
  box-shadow: inset 2px 2px 2px rgba(232, 229, 229, 0.25), inset -2px -2px 2px rgba(14, 14, 14, 0.25);}

::-webkit-scrollbar-track {
  background-color: #f9f3f3;
  background: linear-gradient(to right,#29262f,#25222d 1px,#0d0b15 1px,#100e19);
}

  body {
  margin: 0px;
  padding: 0px;
  background-color: #2d2c2c;
  height: 3500px;
  width: 100%;
  }

  h1 {
  position: absolute;
  top: 47%;
  left: 47%;
  transform: translate(-50%, -50%);
  color: #fbf7f7;
  font-family: arial;
  font-size: 48px;
  padding: 5px;
  border: 5px solid #e84649;
  border-radius: 15px;
  }

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

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

Теперь вы успешно создали пользовательскую полосу прокрутки CSS с модификацией, где стиль полосы прокрутки настроить с помощью CSS, и выстраиваем так, как вам нужно. Ведь палитра цвета вся прописана в стилистике, где идет переход с помощью градиента.

Демонстрация

08 Июля 2019 Загрузок: 1 Просмотров: 1443 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 0