| ■67715 / inTopicNo.1) | iPadでも対応できるようにするスクロールプログラムについて |
分類:[Java] 初めて書き込みをさせて頂きます。 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については現在色々付け足している部分もあり分かりづらいかもし れませんが どうぞよろしくお願いいたします。 |