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

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

ただいまの
回答率

87.48%

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

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 119

score 18

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

  • marlboro_tata

    2021/07/04 11:25

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

    キャンセル

  • Hinoarashi.

    2021/07/04 14:23

    marlboro_tata 様

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

    キャンセル

  • marlboro_tata

    2021/07/04 15:33

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

    キャンセル

  • Hinoarashi.

    2021/07/05 09:18

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

    キャンセル

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

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

  • ただいまの回答率 87.48%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る