最初から存在するタグには問題なく適用できたが、
jQueryの.appendであとから追加したリストタグには、
うまく適用できなかった。
それを適用する方法を調べたので、メモ。
perfect-scrollbarを入手する
https://github.com/utatti/perfect-scrollbar
下記を設置する。
perfect-scrollbar.css
perfect-scrollbar.min.js
下記の通り実装して、いろいろ試してみた。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>appendされたリストに、perfect-scrollbarを適用する方法</title>
<link rel="stylesheet" type="text/css" href="perfect-scrollbar.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="perfect-scrollbar.min.js"></script>
</head>
<body>
<h3>【demo01】普通にdivタグに適用してみる。</h3>
<div class="demo01">
<p>【Yahoo!ニュースより転載】昨年12月24日に女優の宮崎あおいさんとの結婚を発表した人気グループ「V6」の岡田准一さんが8日、東京都内で行われた日本特殊陶業の新CM発表会に登場。岡田さんが、結婚発表後、イベントに登場するのは初めてで、イベントの終了間際に報道陣から「ご結婚おめでとうございます」と声を掛けられると、会釈をしてステージを降りた。発表会では、岡田さんが出演する新CM「スピーチ編」がお披露目された。岡田さんが、100人以上と一緒に走るシーンがあり「100人以上の足音を聞くのは、デビュー当時のダンスレッスン以来だと思う。何か初心を感じました」と語った。さらに「前回の『特殊で何が悪い？編』で走るシーンが多かったので、今回も走ると思って、朝から“脚を作って”おきました」と振り返っていた。新CMは11日から放送。Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.
</p>
</div>
<hr>
<h3>【demo02】divの入れ子（二段階）外側に適用。</h3>
<div class="demo02">
<div class="inner-box">
<p>【Yahoo!ニュースより転載】【ピオリア（米アリゾナ州）時事】米大リーグ、マリナーズにイチロー外野手が復帰したことについて、米各メディアは7日大きく伝えた。USAトゥデー紙（電子版）は「（大リーグデビューした）2001年の再現のように受け入れられた」とした上で、「今季が彼の最後のシーズンになりそうだ」と指摘した。一方で、少なくとも50歳まで現役を続けたいと強調したイチローの言葉を紹介し、「今回の復帰で証明されたように、どんなことも不可能ではない」と記事は締めくくられた。「イチローの復帰はケン・グリフィー・ジュニアのケースに似ている」としたのは地元紙タコマ・トリビューン（電子版）。マリナーズでデビューから11年間プレーした後に移籍し、10年後に復帰した殿堂入り名選手を引き合いに出した。同氏は現役最後の2年はイチローとともにプレーし、復帰2年目の10年6月に引退した。大リーグ公式サイトは、イチローが記者会見で大谷との対戦について、「できれば僕も投手で対戦したい」と話したことを大きく取り上げた。Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.
</p>
</div>
</div>
<hr>
<h3>【demo03】divの入れ子（二段階）内側に適用。</h3>
<div class="outer-box">
<div class="demo03">
<p>【Yahoo!ニュースより転載】ソニー・インタラクティブエンタテインメント（SIE）の据え置き型ゲーム機「プレイステーション4」（PS4）が売れ行きがここにきて好調だ。大人気タイトルの最新作が火を付けたためだが、一部では品切れになったり、希望小売価格を超える値を付けて販売されるケースも出てきている。SIEは状況を認識しており、「需要に対応する」という。【画像】「モンハンワールド」通常版とPS4をセットにした商品 ゲームメディア「ファミ通」（Gzブレイン）によると、PS4は1月に33万台、2月に26万4000台を販売。2カ月連続で任天堂の「Nintendo Switch」を上回り、ゲーム機の売り上げランキングでトップに立っている。 好調の要因は、カプコンが1月26日に発売した最新作「モンスターハンター：ワールド」だ。据え置き型ゲーム機向けとしては9年ぶりとなる「モンハン」シリーズ最新作で、PS4ならではの高画質なグラフィックに対応した点などが特徴。発売から約1カ月後の3月5日に累計出荷本数が750万本を突破し、カプコンの単一タイトルとして過去最高を更新した。 “モンハン特需”に合わせ、SIEは「モンハンワールド」通常版とPS4をセットにした「PlayStation 4 MONSTER HUNTER：WORLD Starter Pack」も展開。この機会にPS4を購入するモンハンファンへの訴求を図った。 ただ、あまりのモンハン人気の影響で、全国のゲーム店や家電量販店ではPS4が品薄状態に陥っているようだ。Twitter上では「エディオンやビックカメラで売り切れていた」「周辺機器も在庫がなかった」――といった声が飛び交っている。 さらに、インターネット通販（EC）サイトのAmazon.co.jpや楽天市場では、SIEの希望小売価格（税別3万4980円～）を上回る5～6万円代でPS4が販売されるケースも増加。ネット上では「値上がりしていて買えない」と嘆く声も出ている。 せっかくの需要増に供給が追い付かなければ、SIEにとっても大きな機会損失となる。SIEはこうした状況をどう捉えており、今後どう対応していくのか。Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.</p>
</div>
</div>
<hr>
<h3>【demo04】divの中身がリストの場合。スクロールバーはdivに適用。</h3>
<div class="demo04">
<ul class="list-ul-li-type-a">
<li>ファミ通.com</li>
<li>ゲーム</li>
<li>VR</li>
<li>PCゲーム</li>
<li>アーケード</li>
<li>esports</li>
<li>アニメ/声優</li>
<li>ホビー/おもちゃ</li>
<li>スマホ</li>
<li>求人</li>
<li>プレゼント/アンケート</li>
<li>ゲーム発売スケジュール</li>
<li>PS4ゲーム発売予定278本</li>
<li>ゲームタイトルを探す</li>
<li>全機種PS4PS3Vita3DSSwitchWiiUXboxOneXbox360PSPその他機種</li>
<li>ゲーム発売予定</li>
<li>新作・発売中ソフト</li>
<li>過去に発売したソフト</li>
<li>日付順</li>
<li>人気順</li>
<li>購入決定者が多い</li>
<li>491人登録</li>
<li>PS4キングダムハーツIII</li>
<li>価格：未定</li>
<li>発売日：2018年</li>
<li>482人登録</li>
<li>PS4ファイナルファンタジーVIIリメイク</li>
<li>価格：未定</li>
<li>発売日：未定</li>
<li>Noimage</li>
<li>175人登録</li>
<li>PS4PSVR絶体絶命都市4Plus-SummerMemories-（PSVR対応）</li>
<li>価格：未定</li>
<li>発売日：2018年</li>
<li>161人登録</li>
<li>PS4PSVRエースコンバット7スカイズ・アンノウン（PSVR対応）</li>
<li>価格：未定</li>
<li>発売日：2018年</li>
<li>158人登録</li>
<li>PS4deepdown</li>
<li>価格：未定</li>
<li>発売日：未定</li>
<li>153人登録</li>
<li>PS4シェンムー3</li>
<li>価格：未定</li>
<li>発売日：2018年</li>
<li>Noimage</li>
<li>133人登録</li>
<li>PS4機動戦士ガンダム新シリーズ（仮題）</li>
<li>価格：未定</li>
<li>発売日：未定</li>
<li>129人登録</li>
<li>PS4二ノ国IIレヴァナントキングダム</li>
<li>価格：8000円[税抜]／8640円[税込(8%)]</li>
<li>発売日：2018年3月23日（金）</li>
<li>72人登録</li>
<li>PS4DEATHSTRANDING（デス・ストランディング）</li>
<li>価格：未定</li>
<li>発売日：未定</li>
<li>Noimage</li>
<li>67人登録</li>
<li>PS4レッド・デッド・リデンプション2</li>
<li>価格：未定</li>
<li>発売日：2018年10月26日（金）</li>
<li>Noimage</li>
<li>51人登録</li>
<li>PS4十三機兵防衛圏</li>
<li>価格：未定</li>
<li>発売日：2018年</li>
<li>PS4DetroitBecomeHuman</li>
<li>価格：6900円[税抜]／7452円[税込(8%)]</li>
<li>発売日：2018年5月25日（金）</li>
<li>45人登録</li>
<li>PS4ファークライ5</li>
<li>価格：8400円[税抜]／9072円[税込(8%)]</li>
<li>発売日：2018年3月29日</li>
<li>39人登録</li>
<li>PS4北斗が如く</li>
<li>価格：8390円[税抜]／9061円[税込(8%)]</li>
<li>発売日：2018年3月8日</li>
<li>32人登録</li>
<li>PS4アノニマス・コード</li>
<li>価格：7800円[税抜]／8424円[税込(8%)]</li>
<li>発売日：未定</li>
<li>Noimage</li>
<li>29人登録</li>
<li>PS4キングダムアンダーファイア2</li>
<li>価格：未定</li>
<li>発売日：未定</li>
<li>Noimage</li>
<li>25人登録</li>
<li>PS4不思議の幻想郷THETOWEROFDESIREforPlaystation4（PSStoreダウンロード版）</li>
<li>価格：4600円[税抜]／4968円[税込(8%)]</li>
<li>発売日：未定</li>
<li>Noimage</li>
<li>25人登録</li>
<li>PS4東方蒼神縁起（仮題）</li>
<li>価格：未定</li>
<li>発売日：未定</li>
<li>Noimage</li>
<li>24人登録</li>
<li>PS4CODEVEIN（コードヴェイン）</li>
<li>価格：未定</li>
<li>発売日：2018年</li>
<li>Noimage</li>
<li>22人登録</li>
<li>PS4ドラゴンクエストビルダーズ2</li>
<li>価格：未定</li>
</ul>
</div>
<hr>
<h3>【demo05】divの中身がリストの場合。スクロールバーはリストに適用。</h3>
<div class="outer-box-05">
<ul class="demo05">
<li>PS4</li>
<li>最新ゲーム情報</li>
<li>ゲーム発売予定</li>
<li>新作・発売中ソフト</li>
<li>本体同時発売ソフト</li>
<li>PS4のまとめ</li>
<li>PlayStationCamera</li>
<li>実況・生配信</li>
<li>リモートプレイ</li>
<li>PS4ロンチ・初週販売台数</li>
<li>新型PS4</li>
<li>PlayStationVR</li>
<li>Switch</li>
<li>最新ゲーム情報</li>
<li>おすすめのゲーム</li>
<li>ゲーム発売予定</li>
<li>新作・発売中ソフト</li>
<li>過去に発売したソフト</li>
<li>PSVita</li>
<li>最新ゲーム情報</li>
<li>おすすめのゲーム</li>
<li>ゲーム発売予定</li>
<li>新作・発売中ソフト</li>
<li>過去に発売したソフト</li>
<li>PSVitaのまとめ</li>
<li>PSVita旧型と新型の違い</li>
<li>PSVitaTVで遊ぶ</li>
<li>リモートプレイで遊ぶ</li>
<li>3DS/LL</li>
<li>最新ゲーム情報</li>
<li>おすすめのゲーム</li>
<li>ゲーム発売予定</li>
<li>新作・発売中ソフト</li>
<li>過去に発売したソフト</li>
<li>3DS/LLのまとめ</li>
<li>3DS本体の種類</li>
<li>ソフトやデータの移動・引っ越し</li>
<li>3DSでニコ動を見る</li>
<li>PS3</li>
<li>最新ゲーム情報</li>
<li>おすすめのゲーム</li>
<li>ゲーム発売予定</li>
<li>新作・発売中ソフト</li>
<li>過去に発売したソフト</li>
<li>PS3のまとめ</li>
<li>PS3本体モデル・種類</li>
<li>PSP・PSVitaと連携する</li>
<li>Wii/WiiU</li>
<li>最新ゲーム情報</li>
<li>おすすめのゲームWii</li>
<li>おすすめのゲームWiiU</li>
<li>ゲーム発売予定Wii</li>
<li>ゲーム発売予定WiiU</li>
<li>新作・発売中ソフトWii</li>
<li>新作・発売中ソフトWiiU</li>
<li>過去に発売したソフトWii</li>
<li>過去に発売したソフトWiiU</li>
<li>XboxOne</li>
<li>最新ゲーム情報</li>
<li>おすすめのゲーム</li>
<li>ゲーム発売予定</li>
<li>新作・発売中ソフト</li>
<li>過去に発売したソフト</li>
<li>Xbox360</li>
<li>最新ゲーム情報</li>
<li>おすすめのゲーム</li>
<li>ゲーム発売予定</li>
<li>新作・発売中ソフト</li>
<li>過去に発売したソフト</li>
<li>サービス</li>
<li>ビジネス</li>
<li>コミュニティ（コミニー）</li>
<li>その他</li>
<li>サイトマップ</li>
<li>インフォメーション</li>
<li>お問い合わせ</li>
<li>プライバシーポリシー</li>
<li>利用条件・免責</li>
<li>cookie情報について</li>
<li>各誌/各媒体</li>
<li>ファミ通Connect!On</li>
<li>ファミ通文庫-FBOnline</li>
<li>ファミ通App</li>
<li>ファミ通コミッククリア</li>
</ul>
</div>
<div id="template-01" style="display:none;">
<ul>
<li>ア</li>
<li>ICEWATCH</li>
<li>(アイスウォッチ)</li>
<li>AVOCA</li>
<li>(アヴォカ)</li>
<li>agnesb.</li>
<li>(アニエスベー)</li>
<li>ARNEJACOBSEN</li>
<li>(アルネヤコブセン)</li>
<li>ALBA</li>
<li>(アルバ)</li>
<li>INGENU</li>
<li>(アンジェーヌ)</li>
<li>ISSEYMIYAKE</li>
<li>(イッセイミヤケ)</li>
<li>EONE</li>
<li>(イーワン)</li>
<li>INDEPENDENT</li>
<li>(インディペンデント)</li>
<li>wicca</li>
<li>(ウィッカ)</li>
<li>EXCEED</li>
<li>(エクシード)</li>
<li>Xme</li>
<li>(エックスミー)</li>
<li>EDIFICE</li>
<li>(エディフィス)</li>
<li>N.B.YAEGER</li>
<li>(エヌビー・イエガー)</li>
<li>AngelHeart</li>
<li>(エンジェルハート)</li>
<li>AngelClover</li>
<li>(エンジェルクローバー)</li>
<li>EMPORIOARMANI</li>
<li>(エンポリオアルマーニ)</li>
<li>OCEANUS</li>
<li>(オシアナス)</li>
<li>Orobianco</li>
<li>(オロビアンコ)</li>
<li>カ</li>
<li>CASIO</li>
<li>(カシオ)</li>
<li>CASIO(逆輸入)</li>
<li>CalvinKlein</li>
<li>(ｶﾙﾊﾞﾝ･ｸﾗｲﾝ)</li>
<li>KARLLAGERFELD</li>
<li>(カール・ラガーフェルド)</li>
<li>CABANEdeZUCCa</li>
<li>(カバンドズッカ)</li>
<li>Q&QSmileSolar</li>
<li>Kii:</li>
<li>(キー)</li>
<li>KiRIE</li>
<li>(キリエ)</li>
<li>KATHARINEHAMNETTLONDON</li>
<li>CARAVELLE</li>
<li>(キャラベル)</li>
<li>KLASSE14</li>
<li>(クラスフォーティーン)</li>
<li>CLUBLAMER</li>
<li>(クラブ・ラ・メール)</li>
<li>GrandSeiko</li>
<li>(グランドセイコー)</li>
<li>XC</li>
<li>(クロスシー)</li>
<li>KRONABY</li>
<li>(クロナビー)</li>
<li>Katespade</li>
<li>(ケートスペード)</li>
<li>KOMONO</li>
<li>(コモノ)</li>
<li>サ</li>
<li>SIMONCARTER</li>
<li>(サイモンカーター)</li>
<li>SEALANE</li>
<li>(シーレーン)</li>
<li>G-SHOCK</li>
<li>(ジーショック)</li>
<li>G-SHOCKG-STEEL</li>
<li>(ジーショックジースチール)</li>
<li>CITIZENGLOBAL</li>
<li>(シチズンアテッサ)</li>
<li>CITIZENL</li>
<li>(シチズンエル)</li>
<li>CITIZENGLOBAL</li>
<li>(シチズングローバル)</li>
<li>CITIZENCOLLECTION</li>
<li>(シチズンコレクション)</li>
<li>CITIZENPROMASTER</li>
<li>(シチズンプロマスター)</li>
<li>CITIZENLIGHTinBLACK</li>
<li>(シチズンライトインブラック)</li>
<li>SCHAUER</li>
<li>(シャウアー)</li>
<li>GIULIETTAVERONA</li>
<li>(ジュリエッタベローナ)</li>
<li>JILLSTUART</li>
<li>(ジルスチュアート)</li>
<li>JILLbyJILLSTUART</li>
<li>(ジルバイジルスチュアート)</li>
<li>SWISSMILITARY</li>
<li>(スイスミリタリー)</li>
<li>SWATCH</li>
<li>(スウォッチ)</li>
<li>SKAGEN</li>
<li>(スカーゲン)</li>
<li>STOWA</li>
<li>(ストーヴァ)</li>
<li>spica</li>
<li>(スピカ)</li>
<li>SmartWatch</li>
<li>(スマートウォッチ)</li>
<li>SUUNTO</li>
<li>(スント)</li>
<li>SEIKOSELECTION</li>
<li>(セイコーセレクション)</li>
<li>SEIKOASTRON</li>
<li>(セイコーアストロン)</li>
<li>SOMA</li>
<li>(ソーマ)</li>
<li>ZODIAC</li>
<li>(ゾディアック)</li>
</ul>
</div>
<hr>
<h3>【demo06】appendした領域に適用してみる。</h3>
<button onClick="display_on();">表示する</button>
<button onClick="display_off();">隠す</button>
<div id="display_area" class="demo06" style="display:none;">ここに表示する</div>
<script>
function display_on(){
var list_html = $("#template-01").html();
$("#display_area").html('');
$("#display_area").append(list_html);
$("#display_area").css('display', 'block');
}
function display_off(){
$("#display_area").html('');
$("#display_area").css('display', 'none');
}
</script>
<style>
.demo01{
position: relative; overflow: auto;
width: 300px; height: 200px; background-color: yellow;
}
.demo02{
position: relative; overflow: auto;
width: 300px; height: 200px; background-color: lime;
}
.demo03{
position: relative; overflow: auto;
width: 300px; height: 200px; background-color: linen;
margin: 30px;
}
.inner-box{
background-color: pink; margin: 30px;
}
.outer-box{
background-color: palegreen; width: 400px; height: 300px;
}
.demo04{
position: relative; overflow: auto;
width: 800px; height: 200px; background-color: Plum;
}
.list-ul-li-type-a{
background-color: Chocolate;
margin: 20px; width: 600px;
}
ul.demo05{
margin: 10px;
position: relative; overflow: auto;
background-color: Orange;
width: 400px; height: 200px;
}
div.outer-box-05{
background-color: Thistle;
width: 600px; height: 400px;
}
.demo06{
background-color: Aquamarine;
position: relative; overflow: auto;
width: 400px; height: 300px;
}
</style>
<script>
new PerfectScrollbar('.demo01');
new PerfectScrollbar('.demo02');
new PerfectScrollbar('.demo03');
new PerfectScrollbar('.demo04');
new PerfectScrollbar('.demo05');
new PerfectScrollbar('.demo06');
</script>
<br><br><br><br><br>
<br><br><br><br><br>
</body>
</html>
結論：appendした領域に適用させたい場合は、demo06のように、div側に適用する。ul側だと上手くいかない。