質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

0回答

1145閲覧

【Rails】perfect-scrollbar.jsが動かない

Hinoarashi.

総合スコア76

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/07/03 14:59

編集2022/01/12 10:55

overflow:: scroll;-webkit-scrollbar-thumbのオプションでスマホの横スクロールバーを常時表示したかったのですが、Androidのみ表示されました。
どうやらiPhoneの仕様でスクロールバーはスクロール時のみ表示されるらしいです。

そこで、perfect-scrollbar.jsというプラグインを使えばiphoneでも表示されるらしく、
実装を試みたのですが、どう頑張っても動きません。

JavaScriptのプラグイン「perfect-scrollbar.js」を使ってみる
常時スクロールバーを表示する

該当のソースコード

//app/views/index.html.slim = stylesheet_link_tag "perfect-scrollbar" = javascript_include_tag 'perfect-scrollbar' javascript: var overflow-inside = new PerfectScrollbar(".overflow-inside", { wheelPropagation: true}); 略 .overflow-inside ul.switch コンテンツの要素 .overflow-inside ul.switch コンテンツの要素 .overflow-inside ul.switch コンテンツの要素
//app/assets/top.scss 略 .overflow-inside { position: relative; width: 400px; height: 400px; } .overflow-inside .ps__rail-x { opacity: 0.6; }
//perfect-scrollbar.scss /* * Container style */ .ps { overflow: hidden !important; overflow-anchor: none; -ms-overflow-style: none; touch-action: auto; -ms-touch-action: auto; } /* * Scrollbar rail styles */ .ps__rail-x { display: none; opacity: 0; transition: background-color .2s linear, opacity .2s linear; -webkit-transition: background-color .2s linear, opacity .2s linear; height: 15px; /* there must be 'bottom' or 'top' for ps__rail-x */ bottom: 0px; /* please don't change 'position' */ position: absolute; } .ps__rail-y { display: none; opacity: 0; transition: background-color .2s linear, opacity .2s linear; -webkit-transition: background-color .2s linear, opacity .2s linear; width: 15px; /* there must be 'right' or 'left' for ps__rail-y */ right: 0; /* please don't change 'position' */ position: absolute; } .ps--active-x > .ps__rail-x, .ps--active-y > .ps__rail-y { display: block; background-color: transparent; } .ps:hover > .ps__rail-x, .ps:hover > .ps__rail-y, .ps--focus > .ps__rail-x, .ps--focus > .ps__rail-y, .ps--scrolling-x > .ps__rail-x, .ps--scrolling-y > .ps__rail-y { opacity: 0.6; } .ps .ps__rail-x:hover, .ps .ps__rail-y:hover, .ps .ps__rail-x:focus, .ps .ps__rail-y:focus, .ps .ps__rail-x.ps--clicking, .ps .ps__rail-y.ps--clicking { background-color: #eee; opacity: 0.9; } /* * Scrollbar thumb styles */ .ps__thumb-x { background-color: #aaa; border-radius: 6px; transition: background-color .2s linear, height .2s ease-in-out; -webkit-transition: background-color .2s linear, height .2s ease-in-out; height: 6px; /* there must be 'bottom' for ps__thumb-x */ bottom: 2px; /* please don't change 'position' */ position: absolute; } .ps__thumb-y { background-color: #aaa; border-radius: 6px; transition: background-color .2s linear, width .2s ease-in-out; -webkit-transition: background-color .2s linear, width .2s ease-in-out; width: 6px; /* there must be 'right' for ps__thumb-y */ right: 2px; /* please don't change 'position' */ position: absolute; } .ps__rail-x:hover > .ps__thumb-x, .ps__rail-x:focus > .ps__thumb-x, .ps__rail-x.ps--clicking .ps__thumb-x { background-color: #999; height: 11px; } .ps__rail-y:hover > .ps__thumb-y, .ps__rail-y:focus > .ps__thumb-y, .ps__rail-y.ps--clicking .ps__thumb-y { background-color: #999; width: 11px; } /* MS supports */ @supports (-ms-overflow-style: none) { .ps { overflow: auto !important; } } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .ps { overflow: auto !important; } }
//app/assets/javascripts/perfect-scrollbar.js /*! * perfect-scrollbar v1.5.0 * Copyright 2020 Hyunje Jun, MDBootstrap and Contributors * Licensed under MIT */ (function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : typeof define === 'function' && define.amd ? define(factory) : (global = global || self, global.PerfectScrollbar = factory()); }(this, (function () { 'use strict'; function get(element) { return getComputedStyle(element); } function set(element, obj) { for (var key in obj) { var val = obj[key]; if (typeof val === 'number') { val = val + "px"; } element.style[key] = val; } return element; } function div(className) { var div = document.createElement('div'); div.className = className; return div; } var elMatches = typeof Element !== 'undefined' && (Element.prototype.matches || Element.prototype.webkitMatchesSelector || Element.prototype.mozMatchesSelector || Element.prototype.msMatchesSelector); function matches(element, query) { if (!elMatches) { throw new Error('No element matching method supported'); } return elMatches.call(element, query); } function remove(element) { if (element.remove) { element.remove(); } else { if (element.parentNode) { element.parentNode.removeChild(element); } } } function queryChildren(element, selector) { return Array.prototype.filter.call(element.children, function (child) { return matches(child, selector); } ); } var cls = { main: 'ps', rtl: 'ps__rtl', element: { thumb: function (x) { return ("ps__thumb-" + x); }, rail: function (x) { return ("ps__rail-" + x); }, consuming: 'ps__child--consume', }, state: { focus: 'ps--focus', clicking: 'ps--clicking', active: function (x) { return ("ps--active-" + x); }, scrolling: function (x) { return ("ps--scrolling-" + x); }, }, }; /* * Helper methods */ var scrollingClassTimeout = { x: null, y: null }; function addScrollingClass(i, x) { var classList = i.element.classList; var className = cls.state.scrolling(x); if (classList.contains(className)) { clearTimeout(scrollingClassTimeout[x]); } else { classList.add(className); } } 略

perfect-scrollbar.cssのpath:app/assets/stylesheets/perfect-scrollbar.scss
perfect-scrollbar.jsのpath:app/assets/javascripts/perfect-scrollbar.js

不具合

①そもそもスクロールバーが表示されません
②デベロッパーツールではエラーが起きてなく、Javascriptとscssは正常に読み込まれています

Androidのみ常にスクロールバーを表示できたコード

//app/assets/stylesheets/top.scss .overflow-inside { overflow-x: scroll; overflow-y: hidden; margin: 0 10px 20px; } .overflow-inside::-webkit-scrollbar { height: 5px; } .overflow-inside::-webkit-scrollbar-track { border-radius: 5px; background: #eee; } .overflow-inside::-webkit-scrollbar-thumb { border-radius: 5px; background: #666; }

補足情報(FW/ツールのバージョンなど)

Rails
Slim
Scss

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

marlboro_tata

2021/07/04 02:25

当方、Railsについての知識が皆無のため回答できないんですが、 少なくとも、デベロッパーツールで「404NotFound」が出ているところからすると、perfect-scrollbar.js、perfect-scrollbar.scss が読み込まれていない状況であるように見受けられます。 app/views/index.html.slim の冒頭2行が読込用のコードかと思いますが、パスを ../assets/ にしてみるとか、もしくはプロジェクトのルートディレクトリを明記するような書き方にする必要がある気がします。404のエラーの解決をまずした方がいいと思います。
Hinoarashi.

2021/07/04 05:23

marlboro_tata 様 ご回答ありがとうございます。 恐縮ですが、rootディレクトリーからのpath指定でも同様の読み込みエラーが発生いたしました。。
marlboro_tata

2021/07/04 06:33

質問者さんへ。ごめんなさい、Railsについての知識が皆無なので、パスの正しい書き方は私にはわからないのです。 質問は編集できるはずなので、まず、JSやCSSが正しく読み込めていない旨を追記し、パスをどう書いたらいいのか?と言う質問内容を追加してみるのはいかがでしょうか。 Rails に詳しい方から反応があるといいのですが...お力になれずごめんなさい。
Hinoarashi.

2021/07/05 00:18

marlboro_tata 様 ご回答ありがとうございます、承知しました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問