私はもともと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;
}