2

DIV内でiScroll4を実行していますが、DIVの高さが動的に生成され、iScrollを台無しにします

    <script src="js/iscroll/iscroll.js?v4"></script>
    <script>
        var myScroll;
        function loaded() {
            myScroll = new iScroll('wrapper-sidebar-left');

            myScroll = new iScroll('wrapper-sidebar-right');

            myScroll = new iScroll('wrapper');

        }

        document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
        document.addEventListener('DOMContentLoaded', loaded, false);

    </script>

DIVを含むiScrollsにハードコードされた高さを指定すると、正常に機能します。

しかし、それはjavascriptによって作成された動的な高さです。そしてiScrollはそれを無視します。ただし、デスクトップブラウザでビューポートのサイズを調整すると、ビューポートのサイズが機能します。

これは、動的な高さを作成するスクリプトです。

    <script>
        $(document).ready(function() {

            $("#latest-tweet").tweet({
                    count: 1,
                    username: ["motocomdigital"],
                    loading_text: "searching twitter..."
            }).bind("loaded", function(){
                    var tweetheight = $("#tweet-area").height();
                    $("#sidebar-wrapper").css({ bottom: tweetheight });
            });

        });
    </script>

Twitterスクリプトを無視します-それは、含まれているDIVの高さを決定しているバインドされた関数の後です。

DIVを含む「スクローラー」の高さは、次のCSS値によって決定されます：top：0pxおよび「bottom」値。ただし、一番下のCSS値は動的です。

ここでライブプロジェクトを参照してください-これは壊れているときです。メニューをクリックして、サイドバーに壊れたスクローラーを表示します。

壊れたスクローラー

次に、以下の同じプロジェクトを参照してください。ただし、ヘッドにハードコードされた下部のCSS値が追加され、スクリプトが削除されています。そして、これはうまくいきます。

働くスクローラー

これは、iScrollが一番下のCSS値を無視していることを意味します（ただし、ビューポートサイズを調整すると機能し始めますが、デバイスではうまくいきません）

どんな助けでも大歓迎です

ありがとう、ジョシュ

更新、これは機能します-しかし、それは毎回機能しますか？

    <script>

        var myScroll;
        function loaded() {
            setTimeout(function () {

                myScroll = new iScroll('wrapper-sidebar-left', {
                    scrollbarClass: 'sub-scrollbar',
                    useTransform: false,
                        onBeforeScrollStart: function (e) {
                            var target = e.target;
                            while (target.nodeType != 1) target = target.parentNode;
                            if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA')
                            e.preventDefault();

                    }
                });

                myScroll = new iScroll('wrapper-sidebar-right');

            }, 1000);

            myScroll = new iScroll('wrapper');

        }
        document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
        document.addEventListener('DOMContentLoaded', loaded, false);

    </script>
4

1 に答える 1

1

refresh()iScrollのメソッドを試しましたか?

myScroll複数の要素にを使用するため、コードを少し変更する必要があります。たとえば、iScrolled が必要な要素が 1 つある場合:

<script type="text/javscript">
  var myScroll;
  function loaded() {
    myScroll = new iScroll('sidebar-wrapper');
  }
  document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
  document.addEventListener('DOMContentLoaded', loaded, false);

  $(function() {
    $("#latest-tweet").tweet({
      count: 1,
      username: ["motocomdigital"],
      loading_text: "searching twitter..."
    }).bind("loaded", function(){
      // as described on the "Methods" section on http://cubiq.org/iscroll
      setTimeout(function () { myScroll.refresh() }, 0);
    });
  });
</script>
于 2011-11-18T09:16:58.460 に答える