limit!webの現場で働く人のブログこの広告は、90日以上更新していないブログに表示しています。今では便利なプラグインとCSS3といった技術を用いて比較的容易に実装できるようになりました。Scrollbarを用いたデザイン性に富んだスクロールバーの実装方法を紹介したいと思います。そちらをご参照ください。ScrollbarHTML/CSS/JS(あればデザインカンプ)サンプルデモさっそくですが、今回自分が作ったサンプルを見ながら解説します。これは線路を走る電車のつもりです...汗サンプルデモのデザインについては、ご了承ください。スクロールバーを出す部分を実装していきます。</div></div>.box:スクロールさせる部分を囲っています。.inner:実際にスクロールさせる場所になります。デザインによってマークアップは調整してください。280px;}それぞれのスタイルになります。こちらもデザインによって調整ください。hidden;」はつけるようにしてください。$('#js-scroll').perfectScrollbar();});jQueryとperfectScrollbarを読み込ませた上で、指定してください。GitHubを覗くと様々なオプションがありますが、今回はデフォルトの指定にしておきます。気になる方は以下を参照してみてください。今回はオリジナルのデザインを反映させたいのでその提供されているCSSをカスタマイズしていきます。以下、必要な箇所を抜粋したCSSになります。/*デザイン幅の指定*/}ポイントは、以下の通りです。分けて3枚の背景画像を指定それぞれの位置調整と幅調整この3点を守れば、素敵なスクロールバーが実装できます。今回は、縦スクロールで実装しましたが、横スクロールの場合も同じです。デザインの注意点デザインを反映する上での注意ですが、スクロールバーは可変になります。スクロール量(コンテンツ量)が増えれば、当然スクロールバーの長さも変わります。実装できない(厳密には、不自然になる)デザインは、スクロールバーの大きさが固定のものです。ScrollbarTweet広告を非表示にする関連記事2019-07-22Webの現場で使えるテクニック集まとめ(完全メモ帳)Webの現場でたまに使うけど忘れてしまい、またググるみたいな記...2017-06-13【脱jQuery】YouTubeから取得したプレイリスト(JSON)をVue.jsで表示してみた。「昔作ったサイトをVue.jsで書き換えています。#レスポンシブweb...ここ最近よく使うなーと思うCSSプロパティの紹介。【自分メモ】cookieの値を取得する。最新記事.htaccessによる少し複雑なリダイレクト備忘録Webの現場で使えるテクニック集まとめ(完全メモ帳)jQueryを使用しない現在地表示(ES6:JavaScript)【JavaScript】現在のURLを取得し、パラメータは除外するJSONジェネレータを作る(Vue.jsとかJavaScriptとか)月別アーカイブ注目記事はてなブログをはじめよう!paradox_tmさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。