scroll

スクロール指定

詳しい導入事例は導入方法を参照してください。

  • DEMO

使い方

[.scrl-thin]でスクロールバーを細く。
[noscroll]はモーダルなどで使うスクロール禁止用。

  • CSS
.scrl-x, .scrl-y, .scrl-xy {-webkit-overflow-scrolling: touch;}
.scrl-x {
  overflow-y: hidden;
  overflow-x: auto;
}
.scrl-y {
  overflow-y: auto;
  overflow-x: hidden;
}
.scrl-xy {overflow: auto;}
.scrl-thin {scrollbar-width: thin;}

/* noscroll
==============================*/
.noscroll {
  width: 100%;
  overflow: hidden;
  position: fixed;
  left: 0;
}
.noscroll #root {
  scrollbar-gutter: stable;
  overflow: auto;
}
.overlay {
  width: 100%;
  height: 100%;
  background: var(--overlay);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  display: none;
}