Javascript 仅滚动动态填充的div，而不滚动主页面_Javascript_Jquery_Css_Iscroll

Javascript 仅滚动动态填充的div，而不滚动主页面

javascript jquery css

Javascript 仅滚动动态填充的div，而不滚动主页面,javascript,jquery,css,iscroll,Javascript,Jquery,Css,Iscroll,所以这篇文章可能会很长，但我被iScroll卡住了。我所做的是用文章填充我的列表，当其中一个被点击时，我在列表上滑动一个div来显示文章。这一部分是有效的，但当我滚动浏览文章并到达结尾时，它会不断滚动文章列表。你可以看一看（该网站是俄语的，但点击一篇文章并滚动到底）。这是我的全部代码： <head> <style> body{ padding: 0; margin: 0; bo

所以这篇文章可能会很长，但我被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。我将共享代码，希望它能帮助其他人新代码如下：

<body>
    <!--Added scroller div(without iScroll it works also...just make two divs so the body isn't scrolled but the second div is scrolled-->
    <div id="wrapper">
        <div class="scroller">
            <header>Main News</header>
            <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>
    <div id="container">
        <div class="scroller">
            <div id="header">
                <button onclick="hide();">Back</button>
            </div>
            <div id="content"></div>
        </div>
    </div>
<script>
        $('body').on('touchmove', function(e){
            e.preventDefault();
        });
//prevents native scrolling so only iScroll is doing the scrolling
//after the AJAX call to get the content, declare your iScroll variable
var myScroll;
            myScroll = new iScroll('wrapper');
            setTimeout (function(){
                myScroll.refresh();
            }, 2000);

    //set time out to give the page a little time to load the content and refresh your iScroll variable so it takes in the entire content of the wrapper div

var myScroll1;
        myScroll1 = new iScroll('container');
//I defined my second iScroll variable here so I can destroy it in the next part...

//function sayhi(url) stays the same but in success of AJAX looks like this:
success: function(content){
                    $('#content').append(content);
                    myScroll1.destroy();
                    myScroll1 = null;
                    myScroll1 = new iScroll('container');
                    setTimeout (function(){
                        myScroll1.refresh();
                    }, 2000);
                }
//when the div slides on the screen and content gets loaded, destroy your second iScroll
//variable, set it to null and define it all over again so it takes in the entire content


主要新闻







返回
$（'body'）。在（'touchmove'，函数（e）上{
e、 预防默认值（）；
});
//防止本机滚动，因此只有iScroll进行滚动
//在AJAX调用获取内容之后，声明iScroll变量
迈斯克罗尔变种；
myScroll=新iScroll（“包装器”）；
setTimeout（函数（）{
myScroll.refresh（）；
}, 2000);
//设置time out，给页面一点时间来加载内容并刷新iScroll变量，以便它接收包装器div的整个内容
myScroll1变种；
myScroll1=新iScroll（“容器”）；
//我在这里定义了第二个iScroll变量，以便在下一部分中销毁它。。。
//函数sayhi（url）保持不变，但AJAX的成功如下所示：
成功：功能（内容）{
$（'#content'）。追加（content）；
myscroll 1.destroy（）；
myScroll1=null；
myScroll1=新iScroll（“容器”）；
setTimeout（函数（）{
myScroll1.refresh（）；
}, 2000);
}
//当div在屏幕上滑动并加载内容时，销毁第二个iScroll
//变量，将其设置为null并重新定义它，以便它接受整个内容

就这样。现在可以完美地处理两个需要在同一页上使用iScroll的div。希望解释清楚，能帮助别人

<body>
    <!--Added scroller div(without iScroll it works also...just make two divs so the body isn't scrolled but the second div is scrolled-->
    <div id="wrapper">
        <div class="scroller">
            <header>Main News</header>
            <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>
    <div id="container">
        <div class="scroller">
            <div id="header">
                <button onclick="hide();">Back</button>
            </div>
            <div id="content"></div>
        </div>
    </div>
<script>
        $('body').on('touchmove', function(e){
            e.preventDefault();
        });
//prevents native scrolling so only iScroll is doing the scrolling
//after the AJAX call to get the content, declare your iScroll variable
var myScroll;
            myScroll = new iScroll('wrapper');
            setTimeout (function(){
                myScroll.refresh();
            }, 2000);

    //set time out to give the page a little time to load the content and refresh your iScroll variable so it takes in the entire content of the wrapper div

var myScroll1;
        myScroll1 = new iScroll('container');
//I defined my second iScroll variable here so I can destroy it in the next part...

//function sayhi(url) stays the same but in success of AJAX looks like this:
success: function(content){
                    $('#content').append(content);
                    myScroll1.destroy();
                    myScroll1 = null;
                    myScroll1 = new iScroll('container');
                    setTimeout (function(){
                        myScroll1.refresh();
                    }, 2000);
                }
//when the div slides on the screen and content gets loaded, destroy your second iScroll
//variable, set it to null and define it all over again so it takes in the entire content