iScroll 4 stops working because of container CSS c

Question

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>

Answer 1

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>