i Przewiń dynamicznie wypełnioną div TYLKO bez przewijania strony głównej

Question

Jul 29, 2013, 04:51 PM

i Przewiń dynamicznie wypełnioną div TYLKO bez przewijania strony głównej

Więc ten post może się wydłużyć, ale utknąłem z iScroll. To, co robię, to zapełnianie mojej listy artykułami, a gdy ktoś kliknie, przesuwa się na liście, aby wyświetlić artykuł. Ta część działa, ale nie po przewinięciu artykułu i dotarciu do końca, przewija listę artykułów. Możesz rzucić okiemtutaj (strona jest w języku rosyjskim, ale kliknij artykuł i przewiń do samego końca). Oto mój cały kod:

<head>
    <style>
        body{
            padding: 0;
            margin: 0;
            border: 0;
        }
        #header{
            position:fixed;
            top:0;
            left:0;
            height:100px;
            width: 100%;
            background-color: black;
        }
        header{
            position: absolute;
            z-index: 2;
            top: 0; left: 0;
            width: 100%;
            height: 50px;
        }
        #wrapper{
            position: absolute;
            z-index: 1;
            width: 100%;
            top: 52px;
            left: 0;
            overflow: auto;
        }
        #container{
            position:fixed;
            top:0;
            right:-100%;
            width:100%;
            height:100%;
            z-index: 10;
            background-color: red;
            overflow: auto;
        }
        #content{
            margin:100px 10px 0px 10px;
        }
    </style>
</head>
<body>
    <header>Main News</header>
    <div id="wrapper">
        <ul id="daily"></ul>
        <ul id="exclusive"></ul>
        <ul id="must"></ul>
        <ul id="main"></ul>
        <ul id="ukr"></ul>
        <ul id="nba"></ul>
        <ul id="euro"></ul>
    </div>
    <div id="container">
        <div id="wrapper2">
            <div id="header">
                <button onclick="hide();">Back</button>
            </div>
            <div id="content"></div>
        </div>
    </div>
    <script src="js/zepto.js"></script>
    <script>
        //AJAX requests to fill the li's...
        function sayhi(url){
            $('#container').animate({
                right:'0',
            }, 200, 'linear');
            $.ajax({
                url: serviceURL + "getnewstext.php",
                data: {link: url},
                success: function(content){
                    $('#content').append(content);
                }
            });
        }
        function hide(){
            $('#container').animate({
                right:'-100%'
            }, 200, 'linear');
            $('#content').empty();
        }
    </script>
    <script src="js/iscroll-lite.js"></script>
    <script>
        var myScroll;
        function scroll () {
            myScroll = new iScroll('wrapper2', {hScroll: false, vScrollbar: false, bounce: false});
            myScroll2 = new iScroll('wrapper', {hScroll: false, vScrollbar: false});
        }
        document.addEventListener('DOMContentLoaded', scroll, false);
    </script>
</body>

Czy istnieje sposób na przewijanie kontenera div, zawartości lub wrapper2 bez przewijania div opakowania z listą artykułów? Może nie używam poprawnie iScroll? Ten sam problem występuje na Androidzie i iPhonie.

EDYTUJ 1:

Ustawiłem pozycję opakowania na ustaloną. Teraz kontener div jest jedynym przewijanym, ale lista artykułów nie jest przewijana ... Dodałem kolejne opakowanie iScroll do opakowania, ale nie działa. Jakieś rady tutaj?

EDYCJA 2:

Więc porzuciłem iScroll razem i spróbowałem zamiast tego CSS. Do moich wydarzeń onclick dodałem:

$('body').css('overflow', 'hidden');

Po kliknięciu przycisku zamknięcia zmieniłem przelew na auto. Teraz to uniemożliwia przewijanie treści w przeglądarce, ale nie w telefonie komórkowym !!! Jak mogę zrobić to samo na telefonie komórkowym ???