如何使用Javascript设置iScroll.js的高度

Question

I'm new to JS, i need some help,

i use iScroll.js file for scrolling view in phonegap application.

i use code for scrolling.

in HTML

<div id ="div_id" align="center" style="width:70%;margin-left: 15%;margin-right: 15%;">
    <table style="width:100%; height:15px;">
        <tr>
            <td>
                <img style="width:20px;height:20px;margin-top: 5px;float:right" src="img/arrowleft.png" onclick="datedecriment()" />
            </td>
            <td align="center">
                <h5>
                    <a id ="month">Month</a>
                    <a id="date">Date</a>
                    <a id="year">year</a>
                </h5>
            </td>
            <td>
                <img style="width:20px;height:20px;margin-top: 5px;float:right" src="img/arrowright.png" onclick="incriment()"/>
            </td>
        </tr>
    </table>
</div>

in JS file

<script type="text/javascript" src="js/iscroll.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);
    //scrolling functionality//
    var myScroll1;
    function loaded1() {
        myScroll1 = new iScroll('div_id', {desktopCompatibility:true});
    }
</script>

but, how to set height. Could you please help me

Answer 1

Try this out

HTML

<div id ="div_id" align="center" style="width:70%;margin-left: 15%;margin-right: 15%;">
    <!-- Extra div as iscroll is placed on direct child element-->
    <div class="my_scroll">
        <table style="width:100%; height:15px;">
            <tr>
                <td>
                    <img style="width:20px;height:20px;margin-top: 5px;float:right" src="img/arrowleft.png" onclick="datedecriment()" />
                </td>
                <td align="center">
                    <h5>
                        <a id ="month">Month</a>
                        <a id="date">Date</a>
                        <a id="year">year</a>
                    </h5>
                </td>
                <td>
                    <img style="width:20px;height:20px;margin-top: 5px;float:right" src="img/arrowright.png" onclick="incriment()"/>
                </td>
            </tr>
        </table>
    </div>
</div>

JS

<script type="text/javascript" src="js/iscroll.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        setTimeout(loaded, 200);
    }, false);

    var myScroll1;
    function loaded1() {
        var height = $('#div_id').height();
        $("#div_id").css({"height": height+"px"});

        _.delay(function() {
            myScroll1 = new iScroll($('#div_id').get(0), {desktopCompatibility:true});
        }, 500);
    }
</script>