SyntaxHighlighterにfleXcroll(2)fleXcrollはheight: auto;がサポートされず

前の関連記事：SyntaxHighlighterにfleXcroll(1)カスタムスクロールバーを表示させる

縦スクロールバーを消す方法がなかなかわかりませんでした。ところがfleXcrollではheight: auto;がサポートされていないのに気づいたのでそれまでのアプローチを変えて解決しました。

fleXcrollはheight: auto;がサポートされず

fleXcrollをclassにつけると高さが縮まって縦スクロールバーがでるのでもうこれはどうしようもないのでは、と諦めかけました。

しかし、fleXcrollはheight: auto;がサポートされず高さをpxで指定しないといけないということがわかりました。

ちゃんとユーザーガイドの最初に書いてありました。

height: auto; style is not currently supported.
fleXcroll V2.0 User Guide

ということでheightをそれぞれ測定して設定することにしました。

ｊQueryで.syntaxhighlighter.flexcroll.flexcrollactive tableのheightを測定して設定

Syntaxhighlighterが作成するtableの高さを測定しそれに17px加えたものをheightに設定すると丁度よくなることがわかりました。

たぶんスクロールバーの高さが15pxなのであとはマージンがどこかに1pxあってそれで15+1+1=17pxになるんだと思います。

高さの測定と設定はjQueryを使いました。

まずはｊQueryをロードする必要があります。1.3.2でもいけました。

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

これを下のコードの前に書いておきます。

<script type="text/javascript">
   $(window).load(function () {
         $.each($('.syntaxhighlighter.flexcroll.flexcrollactive'), function(){$(this).height($(this).find("table").height()+17);});
         fleXenv.updateScrollBars();
      });
</script>

各.syntaxhighlighter.flexcroll.flexcrollactiveの中にあるtableのheightを測定してそれに17pxを加えたあと.syntaxhighlighter.flexcroll.flexcrollactiveのheightに設定しています。

最後に fleXenv.updateScrollBars();でfleXcrollをリロードしています。

fleXcrollでSyntaxHighlighterのスクロールバーをカスタマイズする方法：まだ未完成

SyntaxHighlighterはBlogger:SyntaxHighlighter(4)オートローダーで必要なブラシファイルのみロードするまで設定してあると状態とします。

shCore.cssの変更箇所

.syntaxhighlighter a,
/*.syntaxhighlighter div,*/
.syntaxhighlighter code,
.syntaxhighlighter table,
.syntaxhighlighter table td,
.syntaxhighlighter table tr,
.syntaxhighlighter table tbody,
.syntaxhighlighter table thead,
.syntaxhighlighter table caption,
.syntaxhighlighter textarea {
  -moz-border-radius: 0 0 0 0 !important;
  -webkit-border-radius: 0 0 0 0 !important;
  background: none !important;
  border: 0 !important;
  bottom: auto !important;
  float: none !important;
  height: auto !important;
  left: auto !important;
  line-height: 1.1em !important;
  margin: 0 !important;
  outline: 0 !important;
  overflow: visible !important;
  padding: 0 !important;
  position: static !important;
  right: auto !important;
  text-align: left !important;
  top: auto !important;
  vertical-align: baseline !important;
  width: auto !important;
  box-sizing: content-box !important;
  font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;
  font-weight: normal !important;
  font-style: normal !important;
  font-size: 1em !important;
  min-height: inherit !important;
  min-height: auto !important;
}
.syntaxhighlighter {
  width: 100% !important;
  margin: 1em 0 1em 0 !important;
  position: relative !important;
  overflow: auto !important;
  font-size: 1em !important;
  overflow-y: hidden !important;
  -webkit-text-size-adjust: 100%;
}
.syntaxhighlighter.flexcroll.flexcrollactive{
 overflow: visible !important;
}

2行目と47行目から49行目までが変更部分です。

45行目はiOS Safariで行番号がずれないための設定です。

44行目の設定は全てのpreタグのclass-nameにfleXcrollを設定するならいらないでしょう。

   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 </head>

</head>の上行でjQueryをロード。

</body>の上行は以下のように入力。

 SyntaxHighlighter.defaults['class-name'] = "flexcroll";
 SyntaxHighlighter.all();
 </script>
 <link href='flexcrollstyles.cssのURL' rel='stylesheet' type='text/css'/>
 <script src='flexcroll.jsのURL' type='text/javascript'/>
 <script type="text/javascript">
   $(window).load(function () {
         $.each($('.syntaxhighlighter.flexcroll.flexcrollactive'), function(){$(this).height($(this).find("table").height()+17);});
         fleXenv.updateScrollBars();
      });
 </script>
</body>

IE10でもiOS Safariでも問題なく表示されます。

弱点は一旦普通のスクロールバーが表示されてから入れ替わることと、動作が遅いことです。

IE8ではなんかおかしな表示になります

参考にしたサイト

fleXcroll V2.0 User Guide
fleXcrollではheight: auto;はサポートされていません。height: pxの設定が必須です。

Google Hosted Libraries - Developer's Guide - Make the Web Faster — Google Developers
GoogleによるjQueryホストサービスです。

まよねこ inside » Blog Archive » 【jQuery】thisの親や子要素の指定方法
thisの使い方。$(this).children("ul")ではgrandchildはダメなようです。

ページ読み込み後にjavascript(jQuery)を実行する方法｜Webのこと｜-No Fate-
SyntaxHighlighterが作ったtableが出来上がってからheightを測定しないといけません。

スタイル操作：高さと幅｜jQuery APIリファレンス｜Ajax｜PHP & JavaScript Room
サンプルがあってとてもわかりやすかったです。

意外と知らない!?CSSセレクタ20個のおさらい｜Webpark
網羅的に解説してくれています。

jScrollPane - cross browser styleable scrollbars with jQuery and CSS
fleXcrollがダメならこれを使ってみようと思っていました。

次の関連記事:SyntaxHighlighterにfleXcroll(3)デフォルトテンプレートからの導入方法