2

我在 DIV 中运行 iScroll 4，但 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 值确定：顶部：0px 和“底部”值。但是底部的 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的方法吗？

您确实需要稍微更改代码，因为您使用myScrollfor 多个元素。因此，例如，如果您有 1 个需要 iScrolled 的元素：

<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 回答