スクロールバーのデザインを変更したい

前提・実現したいこと

htmlでwebページを作っています。
作りたいページは別のhtmlを読み込む仕様になっており、スクロールバーが変わったデザインになっているのですが、スクロールバーのデザインを変更できず困っています。

全ブラウザに対応したデザインにしたいのでperfect_scrollbarを使用し実装しようと考えている
デザインを変更したいのは組み込んだhtmlを表示する領域のみで、他のすべてのスクロールバーは通常の(何も指定をかけていない)状態にしたい

発生している問題・エラーメッセージ

元のhtmlに対して指定をかけているのでスクロールバーのデザインが元ページにまで影響してしまう
スクロールができない

該当のソースコード

表示させる側のhtml

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="js/perfect-scrollbar.js"></script>
  <link rel="stylesheet" href="css/perfect-scrollbar.css">
  <title>example</title>
</head>
<body id="html1">
  <main>
    <div class="box">
      <iframe src="./html2.html" class="scroll"></iframe>
    </div>
  </main>
</body>

組み込む側のhtml

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="js/perfect-scrollbar.js"></script>
  <link rel="stylesheet" href="css/perfect-scrollbar.css">
  <title>example2</title>
</head>
<body id="html2">
  <main class="scroll">
    <p>いろはにほへとちりぬるを</p>
    <p>いろはにほへとちりぬるを</p>
    <p>いろはにほへとちりぬるを</p>
    <p>いろはにほへとちりぬるを</p>
    <p>いろはにほへとちりぬるを</p>
    <p>いろはにほへとちりぬるを</p>
    <p>いろはにほへとちりぬるを</p>
    <p>いろはにほへとちりぬるを</p>
    <p>いろはにほへとちりぬるを</p>
    <p>いろはにほへとちりぬるを</p>
  </main>
  
  <script>
    var ps = new PerfectScrollbar('#html2');
  </script>
</body>

行動規範の内容に同意します

回答1件

ベストアンサー

iframe使う必要あります？
以下、iframeを使わない例です。

html
1<head>
2  <meta charset="UTF-8">
3  <meta name="viewport" content="width=device-width, initial-scale=1.0">
4  <link rel="stylesheet" href="css/perfect-scrollbar.css" />
5  <title>example</title>
6<style>
7.box {
8  position: relative;
9  width: 600px;
10  height: 300px;
11  overflow-y: scroll;
12  border: 1px solid #ccc;
13}
14.ps__thumb-y {
15  background-color: #fd284c;
16  width: 11px;
17}
18.ps--active-x > .ps__rail-x,
19.ps--active-y > .ps__rail-y {
20    background-color: #ffdce2;
21}
22.ps__rail-y:hover > .ps__thumb-y,
23.ps__rail-y:focus > .ps__thumb-y,
24.ps__rail-y.ps--clicking .ps__thumb-y {
25  background-color: #fd284c;
26}
27</style>
28</head>
29<body id="html1">
30  <main>
31    <div class="box">
32      <main class="scroll">
33        <p>いろはにほへとちりぬるを</p>
34        <p>いろはにほへとちりぬるを</p>
35        <p>いろはにほへとちりぬるを</p>
36        <p>いろはにほへとちりぬるを</p>
37        <p>いろはにほへとちりぬるを</p>
38        <p>いろはにほへとちりぬるを</p>
39        <p>いろはにほへとちりぬるを</p>
40        <p>いろはにほへとちりぬるを</p>
41        <p>いろはにほへとちりぬるを</p>
42        <p>いろはにほへとちりぬるを</p>
43      </main>
44    </div>
45  </main>
46
47  <script src="js/perfect-scrollbar.js"></script>
48  <script>
49    var ps = new PerfectScrollbar('.box');
50  </script>
51
52</body>
53

投稿2021/04/25 10:18

itagagaki

総合スコア8402

sosakana

2021/04/26 01:33 編集

回答ありがとうございます。ファイルを分けずにを書くことも考えたのですが、html(html2の方)は他のhtml内でも使用したり、独立した状態でサイト内のどこからでもアクセスできるようにしたりしたいと思っています。ですのでできればベタで書かずファイルを分けたいのですが、難しいでしょうか。 iframeでの実装にこだわっているわけではないので、ほかに方法があるなら教えていただきたいです。

itagagaki

2021/04/26 16:45

iframeを使う前提でいろいろ試してみましたが、うまくいかないですね… 以下、情報です。 https://codepen.io/pirodeno/pen/YPPpay このサンプルはiframeにperfect-scrollbarを適用できています。ただ、使っているperfect-scrollbarのバージョンが0.5.7です。これを最新の1.5.0に置き換えても動作しませんでした。 1.5.0はピュアなJavaScriptですが、0.5.7はjQueryが必要です。

行動規範の内容に同意します