Question

我的网站有效的3“面板”，每个100％的vieport宽度。屏幕顶部的固定标题允许您在它们之间导航，从左到右滑动它们。例如，第一个面板是默认设置，left:0%，第二个面板位于left:100%，等等。单击第二个面板的按钮将第一个面板滑动到left:-100%，第二个面板到left:0%。

第一个面板可能比视口高，这意味着您可以像任何网页一样向下滚动它。其他2个面板始终与视口一样高，因此不可滚动。

我希望在查看第二个或第三个面板时，根本无法滚动（因为您不会看到差异 - 第一个面板现在已经离屏，并且没有任何内容可以在2或3上滚动）。当您返回第一个面板时，它应该与您离开时的滚动高度相同。有什么想法吗？

以下是布局图：

enter image description here

滚动时：

enter image description here

Answer 1

有点棘手的解决方案，但你可以找到一些解决方案：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃34;冷冻和＃34; /＆＃34;停用＆＃34;滚动条

1 个答案: