横スクロールのWEBページ実装

Question

実装したいこと

縦にスクロールすると横スクロールされる、かつ横スクロールバーは表示せずに縦のスクロールバーだけ表示させる。

例:

• https://hiraomakoto.jp/

試したプラグイン

GitHub - jquery/jquery-mousewheel: A jQuery plugin that adds cross-browser mouse wheel support.

「縦にスクロールすると横スクロールされる」は実装できたが、横スクロールバーが表示されてそれが動いてしまう。

Horizontal Scroll with GSAP and ScrollMagic

横幅が固定でないため使えなかった

スクロールした際に、マウススクロールをスムーズに動かし、慣性がついた余韻があるスクロールがしたい

例:

• https://hiraomakoto.jp/
• https://codepen.io/intotheprogram/pen/QoJpBd

試したプラグイン

GitHub - inuyaksa/jquery.nicescroll: nicescroll plugin for jquery - scrollbars like iphone/ipad
macとwindowsでスクロールの速度が変わってしまう

GitHub - underground0930/jquery-inertiaScroll: 慣性スクロールのアニメーション用jQueryプラグイン
Mousewheelのプラグインと併用すると機能しなくなる

GitHub - ivmello/easeScroll: Jquery plugin to make mouse wheel smooth scroll
普通にできなかった

その他にもMAKOTO HIRAO PORTFOLIO
のサイトのコードを真似てみようと試みたのですが、コードを解読することができませんでした。

良いプラグイン、または実装方法をお教え頂けないでしょうか？

Answer 1

プラグインを使用するとやはりプラグインに用意されている範囲でのカスタマイズになる為、独自のデザイン、求めているものにはあまり近づかないものとなります。

要するに言いたいことは、まず、「自分でプログラムを作ってみよう」ということです。

JavaScriptでは、スクロール量を取得できますし、要素のスクロール量を変えることもできます。

スクロールバーについてはCSSで隠すこともできますし(一部ブラウザを除く)、強引にJavaScriptでスクロールモドキを作ることも一応可能です。(スクロールを検知して要素をスライドさせる等)

まずは作ってみてはいかがでしょう！

自分で1から作ることで、いい勉強にもなります！

もし作っている途中にエラー等が発生して詰まってしまった際、teratailで再度質問してみてはいかがでしょう。

きっと様々な方が回答して、手助けしてくれるはずです。