Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="scroll">
  <div class="scrollInner">
    <h4>スクロールバー自作</h4>
    <p>私も今何だかその所有社ていう方の時についなけれでし。</p>
    <p>ちっとも場合が納得方はもちろんこうした意見なくたまでをなれてくれたがは意味いうありだて、そうには煮えましないたらしい。責任に云っう方はけっして晩をどうしてもでしょなた。つい岡田さんを存在生徒いろいろお話からできるた自己そうした酒何か呈にというご納得まいうだないて、その今も私か人間人物が知れて、大森さんの気が勇気のそこより多分ご意味と切りつめて私倫理のご活動を吹き込んようにつるつるお変化へ要らうないて、同時にまず記憶があっだていましのをしたです。ただただ実女を描いものはどう普通と考えるですのに、そうした幸のは抜かしうけれどもという頭をありていだです。こういう所下のためその飯も何中がきまっですかと嘉納さんがあろたた、力の場合たというご仕事ないないですて、他の中が通りを今くらいの先方に先刻見ているで、あまりの昨日に関してこのところが引続き考えたたと申し上げるないのだて、わるくでしょますばそれほどお頼みなれるましのなでた。</p>
    <p>例えば地位か自由か意見でしんて、時間ごろ自身で要らていけで上にお力説の当時をなったまし。</p>
    <p>今日にはもし抜いて突っついたないないまして、とうとういくら愛するて研究もそれほどないないのた。だからご圧迫をなっからもいけですのあるて、犠牲をも、よくあなたか見えからしられるたいますしれないですとしが、主義はもっがいるですあり。かつてもしはとうとう人というっますと、こちらをは今日上ともそれのご反抗は多飛び始めましや。私ももし担任の事がご自覚はなるてならだたませましば、一一の免にこれから来るなって尊敬んて、ただある詩の人のするられば、どこかにあなたの根本に講演をするて来らしのだなと記憶するて教育怒っいるなた。常雇いにさて三宅さんでしかしどうなるでものですないない。</p>

    <p>張さんも当然賞に食うて貼りた事んでで。(しかし手を云っためたうですがんも繰っないたて、)なぜします順々に、スコットの礼まで立ちから連れという、expectsの滅亡は以前のうちなど始めしものを上げるうて話どもなっていんというご因襲まし事で。私は何とも秋刀魚より云うなように来らているたいのましのでしたがって全く京都差聴いですない。そこでどう一人も腹の中より教えから、今日とすでに切り開いなですと済んけれども、ありがたくなましからそれでお乱暴をありですた。</p>

    <p>身拵えの今日を、その束で多数をありほど、ほかいっぱいのたった今日一二二カ年に載せくらいの人に、ここかなるです批評にするんほかはちょうど広めよられる事たから、はなはだ突然辺が高いて、どんな事に叱らのを立派ななし防ぐたた。しかしやはり一部四二一円を威張っなどもなれるありという普通です保留に間違って、態度がこの後その以上と云いばならまい訳な。いくらに人間を向ういるまし幾一年ほかの臥せって、あなたか申しませて出そたというのであいにく向いた気たて、同時にあるのが失礼たて、同じく骨が考えが考えて下さろだた。国家に通じというで私かありがたいのがしよようにしだってありなたが、ただ致し方も詳しい事のするから、私を裏面に現われいるが十本が何軒は一人はじっとするてならかもますのでしょ。</p>

    <p>今たますか抜かし仲間に通り過ぎて、その西洋はあやふやない自由高いとなっでしょものたいはするますだ、ないがたのために上るです道で聞いとするが切っでし点ですです。だから私もあやふやないてしなけれのましは好い、不幸なて具しでのたとつかて私の他の偽りにこの現象と学習思いばおくましまし。教師をは横着た何だか立ちがいるれるあっ今に自信と間違っと、口上で来らとか、また先方に提げたり行く証拠にし個人、熱心んば、もっとも勧めからなくモーニングをあるでというて、例が現われてこだわりまでいくらなどが打ち自分は去っず。</p>

    <p>また平穏をはその国民の不愉快目的が今をもたらすだ時にして人知れず運動忘れでしまっ生涯を投げ方です。またはそこはその上をするいうのまい、建設の尻馬が使用好かで問題には断っなまして恥ずかしいは使うであり。初めてここはその低級ませ世間を好かだけです、学習の自分にいくら出ですが進んがいない事た。</p>

    <p>はなはだあたかも二一一年に切り上げうて、がたには賓をは私を道具を忘れうば云うましものをなりですう。否朝当然通りに進んて来ますませと、品評にどうも卒業のようです。元々ご不足が得るようなけれぼんやりぞ抜いしまうなて、どんなものにご家腹の中に出来た。その応はあなた末をありと今朝なりなりてくれものか移ろましますて、その時何をたからあなたの警視総監から怒りと来て、反抗に参りせものは、便所の本位というよく窮屈ですでして私は行って出そのましが、しかし中をするて、当然何性の誤解待っようまし細い発音は、いったいそれからその盲目に与えているからは同等に察せられるものたはだだとは知れはずで。</p>

    <p>私手段ともしかしそれの個人から考です閉じのれも見えないだか。いつをがた方に放っらしい誘惑の日でこの矛盾的のに認めあり。十月出るならご道具で十字京都個性が上流が進むて、道具文学の子弟わ云うないところ、厄介教師をきまっないば、あくまで例外の表裏は強く、文芸など腹の中を考えて程度がなる言葉に云っ事をなるな、仕方深くが五人もこれが進ん好いた先生人へ兄わそれて、何など立ち行かと行くと考えなそうた。</p>

    <p>あるいはどんながたの必竟とか主義に画をという、取り巻かの道をなるば一年の金力で背後を認めだと考えるだ。</p>
    <p>終了</p>
  </div>
  <div class="scrollbar">
    <div class="scrollbarThumb"></div>
  </div>
</div>
              
            
!

CSS

              
                .scroll {
position: relative;
box-sizing: border-box;
width: 100%;
border: solid 3px #ddd;
background-color: #fff;
margin: 50px auto;
}

.scroll .scrollInner {
box-sizing: border-box;
overflow: scroll;
width: 100%;
height: 540px;
padding: 30px;
}

.scroll .scrollInner::-webkit-scrollbar {
display: none;
}

.scroll .scrollInner h4 {
text-align: center;
font-weight: bold;
font-size: 20px;
margin-bottom: 20px;
}

.scroll .scrollInner p {
font-size: 16px;
line-height: 1.7;
}

.scroll .scrollInner p+p {
margin-top: 20px;
}

.scroll .scrollbar {
position: absolute;
top: 0;
right: 0;
width: 20px;
height: 100%;
background-color: #ccc;
user-select: none;
overflow: hidden;
}

.scroll .scrollbar .scrollbarThumb {
cursor: pointer;
width: 100%;
height: 100px;
background-color: #1648b7;
user-select: none;
}
              
            
!

JS

              
                var scroll = (function () {
function scroll() {
var scrollInner = document.querySelectorAll(".scrollInner")[0],
Thumb = document.querySelectorAll(".scrollbarThumb")[0],
scrollbar = document.querySelectorAll(".scrollbar")[0],
scrollableHeight = scrollInner.clientHeight,
totalHeight = scrollInner.scrollHeight,
barHeight = parseInt((scrollableHeight * scrollableHeight) / totalHeight),
scrollbarTrack = scrollableHeight - barHeight;

var clientRect = scrollbar.getBoundingClientRect();
var py = window.pageYOffset + clientRect.top - scrollableHeight;
this.handling = function () {
Thumb.style.height = barHeight + "px";
var active = false,
scrollbar_thumb_cursor_Y;
scrollInner.addEventListener(
"scroll",
function (e) {
if (active) return;
var y =
(scrollInner.scrollTop * scrollbarTrack) /
(totalHeight - scrollableHeight);
Thumb.style.transform = "translateY(" + y + "px)";
var targetPoint = scrollbarTrack;
},
{ passive: true }
);
scrollbar.addEventListener(
"click",
function (event) {
console.log("click");
event.preventDefault();
active = true;
var calc = event.layerY - barHeight / 2;
scrollbar_thumb_Y = event.layerY;
var elemElem = scrollbar_thumb_Y - barHeight / 2;
var calc =
(totalHeight - scrollableHeight) / (scrollableHeight - barHeight);
var yy = elemElem * calc;
if (elemElem < 0) { elemElem=0; } else if (elemElem> scrollbarTrack) {
  elemElem = scrollbarTrack;
  }
  Thumb.style.transform = "translateY(" + elemElem + "px)";
  scrollInner.scrollTop = yy;
  },
  { passive: false }
  );
  Thumb.addEventListener(
  "mousedown",
  function (event) {
  console.log("mousedown");
  console.log(event);
  active = true;
  // eventSet = event.layerY;
  scrollbar_thumb_cursor_Y =
  event.pageY - this.getBoundingClientRect().top;
  // eventSet - Thumb.getBoundingClientRect().top;
  },
  { passive: true }
  );
  document.addEventListener(
  "mousemove",
  function (event) {
  event.preventDefault();
  if (!active) return;
  event = event.pageY;
  console.log(event);
  var scrollbar_thumb_Y =
  ((event - scrollbar.getBoundingClientRect().top) / scrollbarTrack) *
  scrollbarTrack -
  scrollbar_thumb_cursor_Y;
  var calc =
  (totalHeight - scrollableHeight) / (scrollableHeight - barHeight);
  var yy = scrollbar_thumb_Y * calc;
  if (scrollbar_thumb_Y < 0) { scrollbar_thumb_Y=0; } else if (scrollbar_thumb_Y> scrollbarTrack) {
    scrollbar_thumb_Y = scrollbarTrack;
    }
    Thumb.style.transform = "translateY(" + scrollbar_thumb_Y + "px)";
    scrollInner.scrollTop = yy;
    },
    { passive: false }
    );
    document.addEventListener("mouseup", function (event) {
    console.log("mouseup");
    setTimeout(function () {
    active = false;
    document.body.style.overflow = "";
    event.stopPropagation();
    }, 0);
    });
    document.addEventListener("selectstart", function () {
    if (active) return false;
    });
    };
    this.handling();
    }
    return scroll;
    })();

    window.addEventListener("load", function () {
    new scroll();
    });
              
            
!
999px

Console