Fix scrolling issues

This commit is contained in:
Wim Brand
2019-09-19 09:35:09 +02:00
parent 59ef838581
commit c8b9e3bb75
2 changed files with 47 additions and 48 deletions

View File

@@ -51,9 +51,7 @@
} }
/* Page rendering configuration */ /* Page rendering configuration */
html, body {
overflow: hidden;
}
body{ body{
background-color: #0d0d0d; /* Fallback */ background-color: #0d0d0d; /* Fallback */
background-color: var(--body_color); background-color: var(--body_color);
@@ -76,7 +74,8 @@ body{
} }
.button_toggle_navigation { .button_toggle_navigation {
position: absolute; position: fixed;
backface-visibility: hidden;
z-index: 300; z-index: 300;
top: 0; top: 0;
left: 0; left: 0;
@@ -89,7 +88,8 @@ body{
box-shadow: 2px 2px 8px -3px var(--shadow_color); box-shadow: 2px 2px 8px -3px var(--shadow_color);
} }
.page_navigation { .page_navigation {
position: absolute; position: fixed;
backface-visibility: hidden;
z-index: 100; z-index: 100;
width: 250px; width: 250px;
height: 100%; height: 100%;
@@ -107,9 +107,8 @@ body{
.page_body { .page_body {
position: absolute; position: absolute;
z-index: 200; z-index: 200;
top: 0;
right: 0; right: 0;
bottom: 0; height: auto;
left: 250px; left: 250px;
min-width: 300px; min-width: 300px;
display: inline-block; display: inline-block;

View File

@@ -1,5 +1,5 @@
{{define "page_top"}} {{define "page_top"}}
<div id="page_wrapper"> <!-- <div id="page_wrapper"> -->
<button id="button_toggle_navigation" class="button_toggle_navigation" onclick="toggleMenu();"></button> <button id="button_toggle_navigation" class="button_toggle_navigation" onclick="toggleMenu();"></button>
<div id="page_navigation" class="page_navigation"> <div id="page_navigation" class="page_navigation">
<a href="/">Home</a> <a href="/">Home</a>
@@ -30,7 +30,7 @@
Medium:&nbsp;<a href="https://medium.com/pixeldrain" target="_blank">Pixeldrain</a> Medium:&nbsp;<a href="https://medium.com/pixeldrain" target="_blank">Pixeldrain</a>
</div> </div>
</div><!-- end page_body --> </div><!-- end page_body -->
</div><!-- end page_wrapper --> <!-- </div>end page_wrapper -->
<script> <script>
var nav = document.getElementById("page_navigation"); var nav = document.getElementById("page_navigation");
var body = document.getElementById("page_body"); var body = document.getElementById("page_body");