我有一个我目前正在开发的网站,我正在为其中一个页面使用 Scrollify。特别是我的项目部分。
在我访问我的项目页面之前,所有页面都可以正常工作。在那之后,他们都不再滚动了。项目页面继续正常工作,但其他人在我刷新之前不会滚动......即使那样,它们也只能在我重新访问项目页面之前工作。
我很确定这与 SmoothState.js 的实现有关......
关于如何减轻这种情况的任何想法?
我的滚动代码:
$(function() {
$.scrollify({
section : ".project",
scrollbars: false,
setHeights: false,
offset: -100,
updateHash: false,
before: function (i, panels) {
var ref = panels[i].attr("data-section-name");
$(".project.actived").removeClass("actived");
$("[data-section-name="+ref+"]").addClass("actived");
var ref = panels[i].attr("data-section-name");
$(".pagination .active").removeClass("active");
$(".pagination").find("a[href=\"#" + ref + "\"]").addClass("active");
}
$(".pagination a").on("click",$.scrollify.move);
});
我的 SmoothState 代码:
$( function() { // Ready
addBlacklistClass();
addScrollify();
var settings = {
anchors: '.menu-primary-menu-container ul li a, .logo-container a, .card-container .posts-pagination a, .card-container .card a, .post-nav a ',
blacklist: '.wp-link',
prefetch: true,
cacheLength: 2,
scroll: true,
onStart: {
duration: 280, // ms
render: function ( $container ) {
$container.addClass( 'slide-out' );
$('html, body').animate({ scrollTop: 0 }, 500);
}
},
onAfter: function($container) {
$container.removeClass( 'slide-out' );
addBlacklistClass();
addFlickity();
addScrollify();
$(function() {
var div = $('.image-container');
var width = div.width();
div.css('height', width);
});
videojs(document.getElementById('my_video_1'), {}, function(){
// Player (this) is initialized and ready.
});
var $hash = $( window.location.hash );
if ( $hash.length !== 0 ) {
var offsetTop = $hash.offset().top;
$( 'body, html' ).animate( {
scrollTop: ( offsetTop - 60 ),
}, {
duration: 280
} );
}
}
};
$( '#page' ).smoothState( settings );
} );