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
あなたの回答
tips
プレビュー