Game-jam-Devs/Game-Jaming
Game-jam-Devs
/
Game-Jaming
4
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Edited Scrollbar (WIP) 

The Scrollbar anti lag initiative
This commit is contained in:
Kraken 2021-04-08 15:21:49 +02:00
parent 983cc1890c
commit 0318ffbd7a
3 changed files with 37 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
Frontend/Index.html
View File

@ -14,6 +14,7 @@
<link rel="stylesheet" href="Styles/SpinningWheel.css" />
<link rel="stylesheet" href="Styles/minibar.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/overlayscrollbars/1.13.1/css/OverlayScrollbars.css" />
<!-- CSS end -->
<!-- Header scripts -->
<script src="https://kit.fontawesome.com/57b6c8b971.js" crossorigin="anonymous"></script>
@ -22,6 +23,7 @@
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/overlayscrollbars/1.13.1/js/jquery.overlayScrollbars.js"></script>
<!-- Header scripts end -->
</head>
@ -697,12 +699,15 @@
</footer>
<!-- Footer end -->
<!-- Body scripts -->
<script src="Javascript/OverlayScrollbar.js"></script>
<script src="Javascript/ScrollController.js"></script>
<script src="Javascript/Collapsible.js"></script>
<script src="Javascript/PasswordValidation.js"></script>
<script src="Javascript/Kalender.js"></script>
<script src="Javascript/SpinningWheel.js"></script>
<script src="Javascript/minibar.min.js"></script>
<script src="Javascript/HeaderFunctionality.js"></script>
<!-- <script src="Javascript/HeaderFunctionality.js"></script> -->
<script src="Javascript/LoginFunctionality.js"></script>
<!-- Body scripts end -->
</body>

10
Frontend/Javascript/OverlayScrollbar.js Normal file
View File

@ -0,0 +1,10 @@
document.addEventListener("DOMContentLoaded", function() {
//The first argument are the elements to which the plugin shall be initialized
//The second argument has to be at least a empty object or a object with your desired options
OverlayScrollbars(document.querySelectorAll('body'), { });
});
$(function() {
//The passed argument has to be at least a empty object or a object with your desired options
$('body').overlayScrollbars({ });
});

21
Frontend/Javascript/ScrollController.js Normal file
View File

@ -0,0 +1,21 @@
/* When the user scrolls down, hide the navbar. When the user scrolls up, show the navbar */
$(document).ready(function() {
var instance = $('body').overlayScrollbars();
var prevScrollpos = instance.scroll().position.y;
console.log(prevScrollpos);
window.onscroll = function() {
var currentScrollPos = instance.scroll().position.y;
console.log(currentScrollPos);
if (prevScrollpos > currentScrollPos) {
$("#header").css({"top" : "0"});
} else {
$("#header").css({"top" : "-50px"});
}
prevScrollpos = currentScrollPos;
}
});