markdown -webkit-滚动条

Posted 2021-05-05

<div class="container">
  <div class="contents">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum nulla quia soluta adipisci exercitationem, cupiditate, nam totam asperiores perferendis distinctio eos dignissimos, recusandae animi dolor pariatur quidem quod obcaecati voluptatum Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi accusantium dolor amet eveniet dolore voluptatum quas! Similique, earum veritatis tenetur harum nesciunt recusandae corrupti voluptatem, eum, minima necessitatibus blanditiis assumenda!</div>
</div>

.container {
  overflow-x: auto;
  // -webkit-overflow-scrolling: touch; //iOSでは併用できない
  &::-webkit-scrollbar {
    height: .6em;
  }
  &::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: .3em;
  }
  &::-webkit-scrollbar-track-piece {
    background: #ddd;
  }
}


/***********************/
.container {
  width: 200px;
}
.contents {
  width: 300px;
}

-webkit-scrollbar
-----------------


A [Pen](https://codepen.io/takeshi_ymnk/pen/LXodaq) by [TAKESHI YAMANAKA](https://codepen.io/takeshi_ymnk) on [CodePen](https://codepen.io).

[License](https://codepen.io/takeshi_ymnk/pen/LXodaq/license).