我的网站实际上有 3 个“面板”，每个面板的宽度都是视口(viewport)的 100%。屏幕顶部的固定标题允许您在它们之间导航，从左向右滑动它们。例如，第一个面板是默认的，在 left:0%，第二个面板是在 left:100%，等等。点击第二个面板的按钮滑动第一个 left:-100%，第二个 left:0%。
第一个面板可以比视口(viewport)高，这意味着您可以向下滚动它，就像任何网页一样。其他 2 个面板始终与视口(viewport)一样高，因此不可滚动。
我希望，当查看第二个或第三个面板时，根本无法滚动(因为您看不出区别——第一个面板现在不在屏幕上，第二个或第三个面板上没有任何内容可滚动).当您返回到第一个面板时，它应该与您离开时的滚动高度相同。有什么想法吗？
这是布局图:
滚动时:
最佳答案
有点棘手的解决方案，但您可以找到一些解决方案:
var thumbnails = document.querySelectorAll('#thumbnails > div');
[].forEach.call(thumbnails, function (thumbnail, i) {
thumbnail.addEventListener('click', function () {
var panelColor = this.id.replace(/thumbnail-/, '');
document.querySelector('body').className = panelColor;
document.querySelector('body').scrollTop = 0;
setTimeout(function(){
document.querySelector('body').scrollTop = document.querySelector('#' + panelColor).dataset['scrollPos'];
},500);
});
});
window.onscroll= function(){
var currentPanelColor = document.querySelector('body').className;
document.querySelector('#' + currentPanelColor).dataset['scrollPos'] = document.querySelector('body').scrollTop;
}body{
overflow-x:hidden;
width:300vw;
overflow-y:auto;
padding:0;margin:0;
}
#container{
overflow-x:hidden;
white-space: no-wrap;
width:300vw;
padding:0;
margin:0;
position:relative;
transition:left 0.5s ease-in-out;
}
body.blue,body.green{
overflow-y:hidden;
}
.red #container{left:0;}
.blue #container{left:-100vw;}
.green #container{left:-200vw;}
#container > div.panel{
width:100vw;
min-height:100vh;
display:inline-block;
vertical-align: top;
margin:0;
}
#red{background:red;height:200vh}
#blue{background:blue}
#green{background:green}
#thumbnails{
position:fixed;
top:10px;
right:10px;
z-index:200;
}
#thumbnails > div{
height:3em;
width: 5em;
display:inline-block;
border: solid 1px #aaa;
}
#thumbnail-red{background:red;}
#thumbnail-blue{background:blue;}
#thumbnail-green{background:green;}<body class="red">
<div id="container" ><div id="red" class="panel" data-scroll-pos="0"></div><div id="blue" class="panel" data-scroll-pos="0"></div><div id="green" class="panel" data-scroll-pos="0"></div><div id="thumbnails">
<div id="thumbnail-red"></div>
<div id="thumbnail-blue"></div>
<div id="thumbnail-green"></div>
</div></div>
</body>关于jquery - "Freezing"/"Deactivating"滚动条，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28868387/