Refresh skrollr-stylesheets using id

Question

Im using Skrollr for my website. It has to change from a horizontal scroll, for larger screens, to a vertical scroll, for phones. But the s.refresh didn't refresh the data-* values. I tried two codes, both of which changes the id, but skrollr didn't update accordingly.

Code 1:

<style>
    #MainX {
        -skrollr-animation-name: ScrollsX;
    }

    @-skrollr-keyframes ScrollsX {
        0 {transform: translateX(0%);}

        4000 {transform: translateX(-400%);}
    }

    #MainY {
        -skrollr-animation-name: ScrollsY;
    }

    @-skrollr-keyframes ScrollsY {
        0 {transform: translateY(0%);}

        4000 {transform: translateY(-400%);}
    }

    @media (max-width: 991px) {
        .container {
            display: flex;
            flex-direction: column;
            height: auto;
        }

        .navbar {
            position: relative;
        }
    }
</style>

<div id="MainX" class="container">
... Whole Code ...
</div>

<script>
        var Func = function(){
            if (window.innerWidth < 991) {
                var Size = document.getElementById("MainX");
                Size.id = "MainY";
                skrollr.init();
                skrollr.destroy();
                skrollr.init();
            } 
            if(window.innerWidth >= 991) {
                var Size = document.getElementById("MainY");
                Size.id = "MainX";
                skrollr.init();
                skrollr.destroy();
                skrollr.init();
            }
        };
        window.addEventListener("resize", Func);
        window.addEventListener("onload", Func);
    </script>

Code 2 (Style block code is unchanged):

<script>
        window.onload = function(){
            if (window.innerWidth < 991) {
                var Size = document.getElementById("Gg");
                Size.id = "MainY";
            } 
            if(window.innerWidth >= 991) {
                var Size = document.getElementById("Gg");
                Size.id = "MainX";
            }
        };

        var Func = function(){
            if (window.innerWidth < 991) {
                var Size = document.getElementById("MainX");
                Size.id = "MainY";
            } 
            if(window.innerWidth >= 991) {
                var Size = document.getElementById("MainY");
                Size.id = "MainX";
            }
        };

        window.addEventListener("resize", Func);
    </script>

<div id="Gg" class="container">
... Whole Code ...
</div>

<script type="text/javascript" src="js/ScrollX.js"></script>
    <script type="text/javascript" src="js/ScrollAll.js"></script>
    <script type="text/javascript">
        var s = skrollr.init();
    </script>

ScrollX.js is skrollr.min.js whilst ScrollAll.js is skrollr.stylesheets.min.js

For code 1, if the screen width initially is > 991, the id is MainX, and the data-0, and data-4000 are transform:translateX(*%);, while if I resize it to < 991, the id changes to MainY, but the corresponding data-0 and data-4000 are not updated to transform:translateY(*%);. if the width is initially < 991, the id is still MainX, and changes id only when resized, with no changes to the data-* variables. Moreover, this also adds a "no-skrollr" class in the head automatically, might be the reason why the skrollr doesn't works.

For code 2, the initial detection, and resize detection of screen width works fine, but does not even create the class skrollable skrollable-between nor the data-*.

What am I doing wrongly? Any help will be greatly help me. (p.s. this is for my e-portfolio website, wanted to make it a lil fun.)