«Замерзание»/«Деактивация» полосы прокрутки

На моем сайте есть 3 "панели", каждая на 100% шириной vieport. Фиксированный заголовок в верхней части экрана позволяет перемещаться между ними, сдвигая их влево-вправо. Например, первая панель по умолчанию - left:0%, вторая - left:100% и т. Д. Нажатие кнопки для второй панели сдвигает первый на left:-100%, а второй - на left:0%.«Замерзание»/«Деактивация» полосы прокрутки

Первая панель может быть выше, чем область просмотра, то есть вы можете прокручивать ее вниз, как на любой веб-странице. Остальные 2 панели всегда высоки, как и окно просмотра, и, следовательно, не подлежат анализу.

Я бы хотел, чтобы при просмотре второй или третьей панели не было возможности прокрутки (так как вы не увидите разницу - первая панель теперь отключена от экрана, и нет ничего, чтобы прокручивать 2 или 3). Когда вы вернетесь к первой панели, она должна быть на той же самой прокрученной высоте, когда вы ее оставили. Есть идеи?

Вот схема расположения:

enter image description here

Когда прокручивается:

enter image description here

источник

2015-03-05 GtwoK

, показывающий некоторые html/css, поможет, но вы можете посмотреть, как переполнение переполнения на тело скрыто, а затем добавление переполнения-y: auto; для каждого контейнера. – Bosc

Немного сложнее решение, но вы могли бы найти какие-то решения:

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>

источник

2015-03-05 03:41:38 Gael

«Замерзание»/«Деактивация» полосы прокрутки

ответ

Смежные вопросы