3

したがって、この投稿は長くなる可能性がありますが、私は iScroll に行き詰まっています。私がやっていることは、リストに記事を入力することです。クリックすると、リストの div をスライドして記事を表示します。その部分は機能しますが、記事をスクロールして最後に到達すると、記事のリストをスクロールし続けます。こちらでご覧いただけます(サイトはロシア語ですが、記事をクリックして一番下までスクロールしてください)。ここに私のコード全体があります:

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

記事のリストでラッパー div をスクロールせずに、div コンテナー、コンテンツ、または wrapper2 をスクロールする方法はありますか? iScroll を正しく使用していないのでしょうか。Android と iPhone で同じ問題が発生します。

編集1:

ラッパーの位置を固定に設定しました。現在、スクロールするのは div コンテナーだけですが、記事のリストはスクロールしていません...別の iScroll をラッパーに追加しましたが、機能していません。ここで何かアドバイスはありますか?

編集2:

そこで、iScroll をまとめて削除し、代わりに CSS を試してみました。私のonclickイベントに追加しました:

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

閉じるボタンをクリックすると、オーバーフローを自動に変更しました。これにより、モバイルではなくブラウザでの本文のスクロールが停止します!!! モバイルで同じことを行うにはどうすればよいですか???

4

1 に答える 1