0

iframe のスクロールバーをカスタマイズするクロスブラウザー ソリューションを探していました。私は JavaScript にあまり詳しくないので、CSS ソリューションを探していました。Webkit ブラウザー用の css ソリューションを見つけましたが、それは Opera、Chrome でのみ機能し、IE では機能しませんでした。これで、js の使用を避けられないことがわかりました。私は良い解決策を探していました、そしてこれは私の手に来ました

完璧なスクロールバー

ドキュメントを赤くしましたが、少し混乱しています。私はそれの最新バージョンをダウンロードしました。フォルダには多くのファイルが含まれており、どうすればよいかわかりません。「min」や「src」などのフォルダもあります。誰かこのプラグインの使い方を教えてください。HTML に含める必要があるファイルと、作業を完了するために他にどのような設定を行う必要がありますか? 最初に js と jquery を勉強する必要があることはわかっていますが、誰かがここで役に立てば幸いです。ありがとうございました

EDIT：OK私はそれを少し働かせることができました。そのスクロールバーを iframe に適用する必要があります。しかし、私にはいくつかの困難があります。以下に示すようにすると、マウスをiframeの上に移動するとスクロールバーが表示されますが、デフォルトのスクロールバーもそこにとどまり、デフォルトのスクロールバーのみが機能します。

これが私のメインページのコードです：

  <html>
     <head>

       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
       <title>TITLE</title>
       <link rel="stylesheet" type="text/css" media="all" href="css/main.css" />
       <link rel="stylesheet" type="text/css" media="all" href="css/menu.css" />
       <link rel="stylesheet" type="text/css" media="all" href="css/perfect-scrollbar-0.4.8.min.css" />

       <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
       <script type="text/javascript" src="js/menu.js"></script>
       <script type="text/javascript" src="js/contChange.js"></script>
       <script type="text/javascript" src="js/perfect-scrollbar-0.4.8.min.js"></script>
       <script type="text/javascript" src="js/perfect-scrollbar-0.4.8.with-mousewheel.min.js"> </script>
       <script type="text/javascript" src="js/scroll.js"></script>

     </head>

     <body>

       <div id="div1" class="contentHolder" style="display:none">
         <iframe width="340" height="525" frameborder="0" src="content/page.html"></iframe>
       </div>

     </body>
   </html>

CSSは次のとおりです。

  .contentHolder {
    position:relative;
    overflow:hidden;
  }

および JS (含まれている scroll.js):


     $(document).ready(function() {

       $('#div1').perfectScrollbar();

     });
4

2 に答える 2

0

コードに次のコード行を追加します。

<script src="perfect-scrollbar-0.4.8\src/jquery.mousewheel.js"></script>  
<script src="perfect-scrollbar-0.4.8\src/perfect-scrollbar.js"></script>
<link href="perfect-scrollbar-0.4.8\src/perfect-scrollbar.css"/>

スクロールバーについては、ドキュメントで言及されているように次のように記述します。

<style>
#Demo { position: 'relative'; }
</style>
<script>
    $('#Demo').perfectScrollbar();
</script>
<div id='Demo'>
<div>
...
</div>
</div>
于 2014-03-14T09:55:34.083 に答える
0

公式リポジトリに例があります：

https://github.com/noraesae/perfect-scrollbar/blob/master/examples/iframe.html

Perfect Scrollbar で iframe コンテンツを初期化できます

Ps.initialize(iframe.contentDocument.querySelector('#Default'));
于 2016-02-17T12:12:03.097 に答える