由于 javascript jQuery 创建的容器 CSS,iScroll 4 停止工作

发布于 12-16 19:31 字数 2847 浏览 2 评论 0原文

我在 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 的 iScroll 一个硬编码的高度,那么它可以正常工作。

但它是由 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>

I'm running iScroll 4 inside a DIV, but the DIV's height is generated dynamically, and screws up 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>

If I give iScrolls containing DIV a hard coded height then it works fine.

But it's a dynamic height created by javascript. And iScroll ignores it. But when you adjust the viewport size on a desktop browser, its kicks in and works.

This is the script creating the dynamic height.

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

Ignore the twitter script - it's after the binded function which is determining the height of the containing DIV.

The height on the 'scroller's' containing DIV is determined by these CSS values: top: 0px and the 'bottom' value. But the bottom CSS value is dynamic.

See live project here - this is when it's broken, click menu to see the broken scrollers in the sidebar.

Broken scrollers

Then see the same project below but with a hard coded bottom CSS value added in the head, and the script removed. And this works fine.

Working scrollers

Which means iScroll is ignoring the bottom CSS value (but it starts working when you adjust the viewport size, but no good on a device)

Any help would be so appreciated

Thanks, Josh


UPDATE, THIS WORKS - BUT WILL IT WORK EVERYTIME?

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

¢蛋碎的人ぎ生2024-12-23 19:31:25

您尝试过 iScroll 的 refresh() 方法吗?

您确实需要稍微更改一下代码,因为您将 myScroll 用于多个元素。例如,如果您有 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>

have you tried the refresh() method for iScroll?

You do need to change you code a bit because you use the myScroll for multiple elements. So for example if you have 1 element that needs to be 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>
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文