1

私はもともとSkrollr ライブラリを実行していましたが、これを削除する必要がありました。コードを何時間も実行した後、私の目は撃たれます。

スクロール時に URL ハッシュを変更するサイド ナビゲーション (各セクションにはタグ ID があります) があり、skrollr ラップを削除したいが、URL ハッシュ サイド ナビゲーションは保持したいと考えています。問題は、var のラップを削除するとs = skrollr.init({ forceHeight: true, beforerender: function(info){、サイド ナビゲーションが機能しなくなることです:/

var layers = document.getElementById('skrollr-body').getElementsByClassName("slide");
    var nav = document.getElementById('options').getElementsByTagName('ul');
    var layer = 0;
    var activeLayer = 0;

    var onLoad = true;
    var lockButton = false;
    var storeOffset = -1;

    var first = true;

    var initialAnimation = false;

    var animateUpSettings = {
        duration: 500,
        done: function() {
            document.body.style.overflow = 'auto';
            lockButton = false;
        }
    };
    var animateDownSettings = {
        duration: 500,
        easing: 'sqrt',
        done: animateUpSettings.done
    };



    var s = skrollr.init({
        forceHeight: true,
        beforerender: function(info){
            if(first && !window.location.hash){
                for(var i = 0; i < nav.length; i++){
                            if(i == 0){
                                nav[i].setAttribute("class", "button active");
                            }else{
                                nav[i].setAttribute("class", "button inactive");
                            }
                        }
            }else if(first && window.location.hash){

                for(var i = 0; i < nav.length; i++){
                            if(nav[i].getAttribute("tag") == window.location.hash.substring(1)){
                                nav[i].setAttribute("class", "button active");
                            }else{
                                nav[i].setAttribute("class", "button inactive");
                            }
                        }

                        for(var i = 0; i < layers.length; i++){
                    if(layers[i].getAttribute("tag") == window.location.hash.substring(1)){
                        goTo = layers[i];
                        activeLayer = i;
                        break;
                    }
                }

                storeOffset = this.relativeToAbsolute(goTo, 'top', 'top');
                var m = document.height - window.innerHeight;

                if(storeOffset > m){
                    storeOffset = m;
                }

                if(this.getScrollTop() < storeOffset){
                    this.animateTo(storeOffset, animateDownSettings);
                }else{
                    this.animateTo(storeOffset, animateUpSettings);
                }

                first = false;
            }else{

                if(!this.isAnimatingTo()){          
                    if(onLoad){
                        onLoad = false;
                        if(window.location.hash && layers[activeLayer].getAttribute("tag") != window.location.hash.substring(1)){
                            initialAnimation = true;
                        }
                    }
                }

                if(!window.location.hash){
                    nav[0].setAttribute("class", "active");
                }else if(!this.isAnimatingTo()){
                        for(var i = 0; i < nav.length; i++){
                            if(nav[i].getAttribute("tag") == window.location.hash.substring(1)){
                                nav[i].setAttribute("class", "button active");
                            }else{
                                nav[i].setAttribute("class", "button inactive");
                            }
                        }
                }
            }
        },
        render: function(info) {

            if(!this.isAnimatingTo()){
                if(!lockButton){
                    layer = -2;
                    for(var i = 0; i < layers.length; i++){
                        if(this.getScrollTop() >= this.relativeToAbsolute(layers[i], 'top', 'top')){
                            layer = i;
                        }
                    }
                    if(layer < 0) layer = 0;

                    window.location='#'+layers[layer].getAttribute("tag");
                }
            }

            if(initialAnimation){
                initialAnimation = false;
                goTo = null;

                for(var i = 0; i < layers.length; i++){
                    if(layers[i].getAttribute("tag") == window.location.hash.substring(1)){
                        goTo = layers[i];
                        activeLayer = i;
                        break;
                    }
                }

                storeOffset = this.relativeToAbsolute(goTo, 'top', 'top');
                var m = document.height - window.innerHeight;

                if(storeOffset > m){
                    storeOffset = m;
                }

                if(this.getScrollTop() < storeOffset){
                    this.animateTo(storeOffset, animateDownSettings);
                }else{
                    this.animateTo(storeOffset, animateUpSettings);
                }
            }

        }
    });

    document.getElementById('nav').onclick = function(){
        s.stopAnimateTo();
        onLoad = true;
        s.refresh(layers);
        lockButton = true;
    }
4

0 に答える 0