縦スク

Web


Warning: Attempt to read property "site_name" on bool in /home/goodhokkaido/sixwheel.net/public_html/muguruma/wp/wp-content/themes/frame/functions.php on line 208

Warning: Attempt to read property "title" on bool in /home/goodhokkaido/sixwheel.net/public_html/muguruma/wp/wp-content/themes/frame/functions.php on line 211

Warning: Attempt to read property "description" on bool in /home/goodhokkaido/sixwheel.net/public_html/muguruma/wp/wp-content/themes/frame/functions.php on line 217

Warning: Attempt to read property "site_name" on bool in /home/goodhokkaido/sixwheel.net/public_html/muguruma/wp/wp-content/themes/frame/functions.php on line 208

Warning: Attempt to read property "title" on bool in /home/goodhokkaido/sixwheel.net/public_html/muguruma/wp/wp-content/themes/frame/functions.php on line 211

Warning: Attempt to read property "description" on bool in /home/goodhokkaido/sixwheel.net/public_html/muguruma/wp/wp-content/themes/frame/functions.php on line 217

縦スクロール量に応じた既読割合を表示する

ページを縦にスクロールするたびに、ページの既読割合を変化させるウェブサイトがあったので、それを取り入れられないか調べたので、メモ。米国科学アカデミー紀要のウェブサイトを偶然見ていて、「トップに戻るボタン」にページ既読割合が表示されているのを発見しました。これは面白いとおもいつつも、別なやり方で表現できないか模索した結果です。

既読割合を縦で表現

スクロール状況を横で表現しているウェブサイトを見かけたことがあったので、縦で表現できないか試してみました。縦のグラフはスクロールバーのすぐ横に表示したかったので、右側に配置。デフォルトのスクロールと重なって、うまくいきません。これはbodyで反応するスクロールのようで、これを無効にすることから始めました。

  body {
    overflow-x: hidden;
    overflow-y: hidden;
    margin: 0;
  }

そうすると、必然的にbodyの次の要素で画面を覆う必要がでてくるので、既読割合を表示する部分だけ、position: fixedとして、スクロールバーを表示するdivにwidth: 99.5vw、既読割合部分はwidth: 0.5vwとしました。抜粋HTMLの中身は以下です。

<body>
  <div class="scrollBar">
    <div class="scrollBox"></div>
  </div>
  <div class="element__box--div">
    <p>私はその人を常に先生と呼んでいた。</p>
    <p>だからここでもただ先生と書くだけで本名は打ち明けない。</p>
    <p>これは世間を憚かる遠慮というよりも、その方が私にとって自然だからである。</p>
    <p>私はその人の記憶を呼び起すごとに、すぐ「先生」といいたくなる。</p>
    <p>私はその人を常に先生と呼んでいた。</p>
    <p>だからここでもただ先生と書くだけで本名は打ち明けない。</p>
    <p>これは世間を憚かる遠慮というよりも、その方が私にとって自然だからである。</p>
    <p>私はその人の記憶を呼び起すごとに、すぐ「先生」といいたくなる。</p>
    <p>私はその人を常に先生と呼んでいた。</p>
    <p>だからここでもただ先生と書くだけで本名は打ち明けない。</p>
    <p>これは世間を憚かる遠慮というよりも、その方が私にとって自然だからである。</p>
    <p>私はその人の記憶を呼び起すごとに、すぐ「先生」といいたくなる。</p>
      <p>私はその人を常に先生と呼んでいた。</p>
    <p>だからここでもただ先生と書くだけで本名は打ち明けない。</p>
    <p>これは世間を憚かる遠慮というよりも、その方が私にとって自然だからである。</p>
    <p>私はその人の記憶を呼び起すごとに、すぐ「先生」といいたくなる。</p>
  </div>
</body>

スクロールバーバーの出し方も癖があった記憶があったので調べたところ、firfoxとchrome系でcssの記述が違うそう。以下参考になりました。

【CSS】スクロールバーのデザインをカスタマイズする方法
スクロールバーのデザインをCSSでカスタマイズする方法について解説しています。コーディングではスクロールバーもデザイン通…
じゅんぺいブログ

これを参考にcssは以下にしました。

  body {
    overflow-x: hidden;
    overflow-y: hidden;
    margin: 0;
  }
  .scrollBar {
    position: fixed;
    top: 0px;
    right: 0px;
    width: 0.5vw;
    height: 100%;
    background: #eeeeee;
  }
  .scrollBox {
    width: 100%;
    height: 0;
    background: #3a3a3a;
  }
  .element__box--div {
    width: 99.5vw;
    height: 100vh;
    overflow-y: scroll;
    background: #dfc4c4;
    scrollbar-color: #969696 #eeeeee;
    scrollbar-width: auto;
  }
  .element__box--div::-webkit-scrollbar {
    width: 8px;
  }
  .element__box--div::-webkit-scrollbar-thumb {
    background: #969696;
    border-radius: 5px;
  }
  .element__box--div::-webkit-scrollbar-track {
    background: transparent;
  }

最後にjs。スクロールやリサイズする際のjsの発動を参考にしたのはこちら。

現場で役立つ、スクロールバーの必須知識 | 前編 スクロールバーの表示を考慮する
ウェブサイトを作るうえで、至るところに現れるのがスクロールバーです。そのスクロールバーついて実装時に配慮しなければいけな…

bodyを無効にしたら、widow.addEventListener(‘scroll’,)が無効になるので、スクロールバーの設定を追加したdivをwindowのかわりに指定しなければなりません。ただし、addEventListener(‘resize’)はdivで反応しなかったので、widow.addEventListener(‘resize’)にしてあげる必要がありそうです。また、スクロールバーをアニメーションさせたかったので、animejsを使用。なんか見たことあるいい感じの動きができました。もちろん、使わなくても問題ありません。

  <script>
    const scrollBox = document.querySelector('.scrollBox')
    const mainBox = document.querySelector('.element__box--div')

    checkHeight()

    const setScrollHeight = () => {
      checkHeight()

      const scrollY = mainBox.scrollTop
      const scrollPercent = scrollY / (mainBox.scrollHeight - mainBox.clientHeight)
　　　 //animejsを使う場合はこっち
      anime({
        targets: scrollBox,
        easing: 'easeInOutExpo',
        height: scrollPercent * 100 + '%',
        duration: 1000,
      })
　　　 //animejsを使わない場合はこっち
      // scrollBox.style.height = scrollPercent * 100 + '%'
    }

    mainBox.addEventListener('scroll', setScrollHeight)
    window.addEventListener('resize', setScrollHeight)

    function checkHeight() {
      if (mainBox.scrollHeight === mainBox.clientHeight) {
        anime({
          targets: scrollBox,
          easing: 'easeInOutExpo',
          height: ['0', '100%'],
          duration: 1000,
        })
      }
    }
  </script>

コメント