Изменить полосу прокрутки в React без внешних зависимостей - PullRequest
Новая
       24

Изменить полосу прокрутки в React без внешних зависимостей

0 голосов
/ 10 ноября 2019

Я пытаюсь изменить вид полосы прокрутки в моем приложении ReactJS.

По сути, я хотел бы иметь что-то вроде следующего:

enter image description here

Я пытался использовать свойства CSS, например -webkit-scrollbar, -webkit-scrollbar-track и -webkit-scrollbar-thumb, но изменений не вижу.

Я искал в Интернете, но все, что я могу найти, - это сторонние библиотеки, которые предоставляют пользовательские полосы прокрутки.

Есть ли способ сделать это, не полагаясь на внешнюю зависимость?

1 Ответ

1 голос
/ 10 ноября 2019

Вы, безусловно, можете сделать это, используя только CSS, но поддержка браузера не так уж велика, поэтому существует множество решений JavaScript. Вы можете уменьшить ширину -webkit-scrollbar-track, изменив рамку вправо и влево: 

border-left: 5px solid gray;
border-right: 5px solid gray;

Что касается -webkit-scrollbar-thumb, вы можете сделать его похожим на предоставленное вами изображение. изменяя радиус границы: 

border-radius: 10px;

ширина полосы прокрутки может быть изменена с помощью -webkit-scrollbar: 

body::-webkit-scrollbar {
    width: 15px;
}

Изменение ручки, которую я нашел, чтобы выглядеть ближе к вашему желаниюдизайн: https://codepen.io/rasso/pen/QWWxPQo

html {
  background: #2a2d46;
  height: 100%;
  overflow: hidden;
}
body {
  height: 100%;

  overflow: scroll;
  width: 80%;
  max-width: 600px;
  margin: 0 auto;
  padding: 3em;
  font: 100%/1.4 serif;
  border: 1px solid rgba(0, 0, 0, 0.25);
}
p {
  margin: 0 0 1.5em;
}

body::-webkit-scrollbar {
  width: 15px;
  background: #4d4e5a;
  color: #333;
}

body::-webkit-scrollbar-track {
  background: #595a62;
  border-left: 5px solid #2a2d46;
  border-right: 5px solid #2a2d46;
}

body::-webkit-scrollbar-thumb {
  background-color: #fff;
  border-radius: 10px;
}
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem deleniti accusantium quasi ab ad officia cupiditate sed aliquam nobis expedita velit dolorum perspiciatis pariatur nam vero et magnam soluta tempora!</div>
<div>Eveniet deserunt consequatur porro molestiae nulla optio quis totam libero iste nemo odit eum facilis sapiente. Harum similique cupiditate voluptas ea optio sunt molestias eius ab qui obcaecati nesciunt id?</div>
<div>Necessitatibus delectus sint vitae eos quasi optio esse dignissimos enim laborum ipsum harum perspiciatis eaque. Magnam fugiat delectus neque laboriosam in accusamus a veniam inventore asperiores consequatur nihil quae quo.</div>
<div>Eligendi quaerat nesciunt sint nobis qui? Temporibus maiores esse molestiae hic cum culpa sed recusandae dolore sequi modi. Quos illum debitis odio consequatur voluptatum error aliquam rem similique officia recusandae.</div>
<div>Ex suscipit earum reiciendis eaque dolorem inventore accusantium modi voluptatum saepe cum quam tempora autem corrupti illum deleniti iure rerum mollitia quo ducimus soluta ea! Illum aliquid consectetur vitae quod?</div>
<div>Minus rem tempora quo. Deleniti mollitia dignissimos laborum quis quos facilis dolore soluta error provident recusandae veniam minus consequatur blanditiis. Facere tempore praesentium soluta fugiat quia eligendi dolores ullam doloribus!</div>
<div>Aut nulla perferendis officiis accusamus ut aspernatur hic possimus amet blanditiis incidunt repudiandae ullam inventore ipsam recusandae nihil provident facilis totam quibusdam natus eligendi optio quia sapiente rerum quos illo?</div>
<div>Porro soluta nisi impedit voluptatem ex accusantium facilis amet quod blanditiis quia similique totam enim id ratione minus quo modi sequi nam dicta iste aliquid itaque velit accusamus quibusdam consequuntur.</div>
<div>Ab assumenda in ad nesciunt recusandae labore voluptates vero suscipit tenetur ullam sint beatae odio harum quo aperiam quas temporibus pariatur consectetur saepe eveniet minus voluptatem atque iusto similique repudiandae?</div>
<div>In enim odit repellat maxime harum eum expedita fuga vel eaque quaerat optio hic sapiente eveniet neque dolorum eligendi pariatur possimus aliquid minus officiis mollitia quia voluptates sunt nulla est!</div>
...