Только главный div со скрытым переполнением

Question

Я новичок в CSS и на данный момент я пытаюсь узнать больше об этом. Моя идея состояла в том, чтобы создать один из этих сайтов «Одна страница». Я создал основной контейнер со скрытым переполнением. Однако я хочу создать больше div внутри основного контейнера, который можно прокручивать. Внизу я дам рабочий образец кода, который я написал.

Если кто-то может мне помочь или хотя бы дать мне несколько советов, как исправить эту проблему, я буду очень благодарен.

Заранее спасибо.

var PageOne = $(".PageOne").offset().top; 
 
var PageTwo = $(".PageTwo").offset().top; 
 

 
$(".Link1").click(function() { 
 
    $('.Container').animate({ 
 
     scrollTop: PageOne}, 
 
     'slow'); 
 
}); 
 

 
$(".Link2").click(function() { 
 
    $('.Container').animate({ 
 
     scrollTop: PageTwo}, 
 
     'slow'); 
 
});

body{ 
 
    margin:0; 
 
    padding:0; 
 
} 
 

 
.Nav{ 
 
    position:relative; 
 
    width:10%; 
 
    height:100vh; 
 
    background-color:red; 
 
    float:left; 
 
} 
 

 
.Link1, .Link2{ 
 
    position:relative; 
 
    margin-bottom:2vw; 
 
    color:#FFF; 
 
    font-size:3vw; 
 
    text-align:center; 
 
} 
 

 
.Container{ 
 
    position:relative; 
 
    width:90%; 
 
    height:100vh; 
 
    overflow:hidden; 
 
    background-color:green; 
 
    float:left; 
 
} 
 

 
.PageOne{ 
 
    position:relative; 
 
    width:100%; 
 
    height:100vh; 
 
    background-color:gold; 
 
} 
 

 
.PageTwo{ 
 
    position:relative; 
 
    width:100%; 
 
    min-height:100vh; 
 
    background-color:purple; 
 
    overflow:scroll; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="Nav"> 
 
    <div class="Link1"> 
 
    Page 1 
 
    </div> 
 
    <div class="Link2"> 
 
    Page 2 
 
    </div> 
 
</div> 
 

 
<div class="Container"> 
 
    <div class="PageOne"> 
 
    Page One 
 
    </div> 
 
    <div class="PageTwo"> 
 
    Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br> 
 
    </div> 
 
</div>

Answer 1

Я понимаю, что вы пытаетесь сделать здесь. Я сделал что-то подобное, используя html, css и javascript, однако вместо использования контейнера я просто сделал аккордеон, используя приведенный ниже код.

<link rel="stylesheet" href="/resources/demos/style.css"> 
<script> 
$(function() { 
$("#accordion").accordion({ 
    collapsible: true, 
    active: false, 
    heightStyle: "content" 
    }); 
}); 
</script> 

<div id="accordion"> 
    <h2>Heading atop accordion</h2> 
    <div> 
    <p>page info inside of div</p> 
    </div> 
</div> 

Это дает очень похожий эффект. Однако, если вы планируете сделать страницу внутри контейнера прокручиваемой, попробуйте изменить размеры вашего div для второй страницы. Вы можете сделать это, увеличив высоту div. Обычно это можно сделать в html <div style="height:500px;"></div>. Кроме того, вы также можете форматировать высоту страницы в CSS.

Есть также способ сделать вас страницы SCROLLABLE увидеть на этом сайте here