質問内容
質問を評価する
(0ポイント)
|
初めて書き込みをさせて頂きます。
iPadにも対応するスクロールできるボックスの中にアコーディオンメ
ニューを入れる方法について
http://blog-imgs-48-
origin.fc2.com/j/q/u/jqueryintro/accordion.html
こちらのサイトを参考に、縦長の内容の見出しをクリックしたら
アコーディオンが開いて詳細内容が開くホームページを作っていま
す。
この、クリックしたら開く項目が１０個以上あり、
縦長に狭い３個ほどしか見せられないボックスの中で
それら１０個を見せたいので
ボックスをスクロールできる仕様にしたいと考えて作っていました。
そこで、iPad等でも対応できるように
スクロールできるボックスは
こちらのサイトを参考にさせて頂きながら作りました。
http://www.takumi-design.com/archives/898
ここで問題が生じました。
例えばスクロールできるボックスの縦幅が
１０の内３個しか見れない場合、スクロールによって
残りの７個を見せることはできております。
しかし、ボックス内の各項目のアコーディオンを
クリックした際に更に縦長に内容が伸びたときに
スクロール機能がその伸び分を考慮せず、後半部分が
全く閲覧できないという状況です。
ここはどのようにスクロールのプログラムに
伸び分を考慮するよう変更できるでしょうか？
少し調べていたところ、ある方から
updateScrollBarsメソッドを使うことでスクロールバーの更新が可能
とのご教示とソース提示を頂きました。
しかし、私が初心者な分、これをどう適用すべきか
分からない状態です・・・
window.onload = function() {
var flexcrollBox = document.getElementById('sample'),
flexcrollContent =
document.getElementById('sample_contentwrapper'),
sampleBtn = document.getElementById('add-text'),
addText = ' text text text text text text';
sampleBtn.onclick = function(event) {
var stock = flexcrollContent.innerHTML;
flexcrollContent.innerHTML = stock + addText;
// スクロールバーの更新
flexcrollBox.fleXcroll.updateScrollBars();
}
}
分かりづらい文章で申し訳ございません・・・・
なお、これがそのHTMLページになります。
http://tora.tonosama.jp/test/
CSSについては現在色々付け足している部分もあり分かりづらいかもし
れませんが
どうぞよろしくお願いいたします。
|
