したがって、この投稿は長くなる可能性がありますが、私は 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');
閉じるボタンをクリックすると、オーバーフローを自動に変更しました。これにより、モバイルではなくブラウザでの本文のスクロールが停止します!!! モバイルで同じことを行うにはどうすればよいですか???