反正有没有为移动设备修复Pete的page-scroll.js脚本？我已经尝试过那些没有成功的事情：
https://github.com/peachananr/onepage-scroll/issues/206 https://github.com/peachananr/onepage-scroll/issues/129
我的网站地址是https://szulowski.pl 我购买了Bronx主题，希望它也能在移动设备上正常运行，但是由于脚本处于“滚动到滚动”模式，它似乎已损坏。
更改activeFallback。
/* ===========================================================
* jquery-onepage-scroll.js v1.3.1
* ===========================================================
* Copyright 2013 Pete Rojwongsuriya.
* http://www.thepetedesign.com
*
* Create an Apple-like website that let user scroll
* one page at a time
*
* Credit: Eike Send for the awesome swipe event
* https://github.com/peachananr/onepage-scroll
*
* License: GPL v3
*
* ========================================================== */
!function($){
var defaults = {
sectionContainer: "section",
easing: "ease",
animationTime: 1000,
pagination: true,
updateURL: false,
keyboard: true,
beforeMove: null,
afterMove: null,
init: null,
loop: true,
responsiveFallback: false,
direction : 'vertical'
};
$.fn.swipeEvents = function() {
return this.each(function() {
var startX,
startY,
$this = $(this);
$this.bind('touchstart', touchstart);
function touchstart(event) {
var touches = event.originalEvent.touches;
if (touches && touches.length) {
startX = touches[0].pageX;
startY = touches[0].pageY;
$this.bind('touchmove', touchmove);
}
}
function touchmove(event) {
var touches = event.originalEvent.touches;
if (touches && touches.length) {
var deltaX = startX - touches[0].pageX;
var deltaY = startY - touches[0].pageY;
if (deltaX >= 50) {
$this.trigger("swipeLeft");
}
if (deltaX <= -50) {
$this.trigger("swipeRight");
}
if (deltaY >= 50) {
$this.trigger("swipeUp");
}
if (deltaY <= -50) {
$this.trigger("swipeDown");
}
if (Math.abs(deltaX) >= 50 || Math.abs(deltaY) >= 50) {
$this.unbind('touchmove', touchmove);
}
}
}
});
};
$.fn.onepage_scroll = function(options){
var settings = $.extend({}, defaults, options),
el = $(this),
sections = $(settings.sectionContainer)
total = sections.length,
status = "off",
topPos = 0,
leftPos = 0,
lastAnimation = 0,
quietPeriod = 500,
paginationList = "";
$.fn.transformPage = function(settings, pos, index) {
if (typeof settings.beforeMove == 'function') settings.beforeMove(index);
// Just a simple edit that makes use of modernizr to detect an IE8 browser and changes the transform method into
// an top animate so IE8 users can also use this script.
if($('html').hasClass('ie8')){
if (settings.direction == 'horizontal') {
var toppos = (el.width()/100)*pos;
$(this).animate({left: toppos+'px'},settings.animationTime);
} else {
var toppos = (el.height()/100)*pos;
$(this).animate({top: toppos+'px'},settings.animationTime);
}
} else{
$(this).css({
"-webkit-transform": ( settings.direction == 'horizontal' ) ? "translate3d(" + pos + "%, 0, 0)" : "translate3d(0, " + pos + "%, 0)",
"-webkit-transition": "all " + settings.animationTime + "ms " + settings.easing,
"-moz-transform": ( settings.direction == 'horizontal' ) ? "translate3d(" + pos + "%, 0, 0)" : "translate3d(0, " + pos + "%, 0)",
"-moz-transition": "all " + settings.animationTime + "ms " + settings.easing,
"-ms-transform": ( settings.direction == 'horizontal' ) ? "translate3d(" + pos + "%, 0, 0)" : "translate3d(0, " + pos + "%, 0)",
"-ms-transition": "all " + settings.animationTime + "ms " + settings.easing,
"transform": ( settings.direction == 'horizontal' ) ? "translate3d(" + pos + "%, 0, 0)" : "translate3d(0, " + pos + "%, 0)",
"transition": "all " + settings.animationTime + "ms " + settings.easing
});
}
$(this).one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) {
if (typeof settings.afterMove == 'function') settings.afterMove(index);
});
}
$.fn.moveDown = function() {
var el = $(this)
index = $(settings.sectionContainer +".active").data("index");
current = $(settings.sectionContainer + "[data-index='" + index + "']");
next = $(settings.sectionContainer + "[data-index='" + (index + 1) + "']");
if(next.length < 1) {
if (settings.loop == true) {
pos = 0;
next = $(settings.sectionContainer + "[data-index='1']");
} else {
return
}
}else {
pos = (index * 100) * -1;
}
if (typeof settings.beforeMove == 'function') settings.beforeMove( next.data("index"));
current.removeClass("active")
next.addClass("active");
if(settings.pagination == true) {
$(".onepage-pagination li a" + "[data-index='" + index + "']").removeClass("active");
$(".onepage-pagination li a" + "[data-index='" + next.data("index") + "']").addClass("active");
}
$("body")[0].className = $("body")[0].className.replace(/\bviewing-page-\d.*?\b/g, '');
$("body").addClass("viewing-page-"+next.data("index"))
if (history.replaceState && settings.updateURL == true) {
var href = window.location.href.substr(0,window.location.href.indexOf('#')) + "#" + (index + 1);
history.pushState( {}, document.title, href );
}
el.transformPage(settings, pos, next.data("index"));
}
$.fn.moveUp = function() {
var el = $(this)
index = $(settings.sectionContainer +".active").data("index");
current = $(settings.sectionContainer + "[data-index='" + index + "']");
next = $(settings.sectionContainer + "[data-index='" + (index - 1) + "']");
if(next.length < 1) {
if (settings.loop == true) {
pos = ((total - 1) * 100) * -1;
next = $(settings.sectionContainer + "[data-index='"+total+"']");
}
else {
return
}
}else {
pos = ((next.data("index") - 1) * 100) * -1;
}
if (typeof settings.beforeMove == 'function') settings.beforeMove(next.data("index"));
current.removeClass("active")
next.addClass("active")
if(settings.pagination == true) {
$(".onepage-pagination li a" + "[data-index='" + index + "']").removeClass("active");
$(".onepage-pagination li a" + "[data-index='" + next.data("index") + "']").addClass("active");
}
$("body")[0].className = $("body")[0].className.replace(/\bviewing-page-\d.*?\b/g, '');
$("body").addClass("viewing-page-"+next.data("index"))
if (history.replaceState && settings.updateURL == true) {
var href = window.location.href.substr(0,window.location.href.indexOf('#')) + "#" + (index - 1);
history.pushState( {}, document.title, href );
}
el.transformPage(settings, pos, next.data("index"));
}
$.fn.moveTo = function(page_index) {
current = $(settings.sectionContainer + ".active")
next = $(settings.sectionContainer + "[data-index='" + (page_index) + "']");
if(next.length > 0) {
if (typeof settings.beforeMove == 'function') settings.beforeMove(next.data("index"));
current.removeClass("active")
next.addClass("active")
$(".onepage-pagination li a" + ".active").removeClass("active");
$(".onepage-pagination li a" + "[data-index='" + (page_index) + "']").addClass("active");
$("body")[0].className = $("body")[0].className.replace(/\bviewing-page-\d.*?\b/g, '');
$("body").addClass("viewing-page-"+next.data("index"))
pos = ((page_index - 1) * 100) * -1;
if (history.replaceState && settings.updateURL == true) {
var href = window.location.href.substr(0,window.location.href.indexOf('#')) + "#" + (page_index - 1);
history.pushState( {}, document.title, href );
}
el.transformPage(settings, pos, page_index);
}
}
function responsive() {
//start modification
var valForTest = false;
var typeOfRF = typeof settings.responsiveFallback
if(typeOfRF == "number"){
valForTest = $(window).width() < settings.responsiveFallback;
}
if(typeOfRF == "boolean"){
valForTest = settings.responsiveFallback;
}
if(typeOfRF == "function"){
valFunction = settings.responsiveFallback();
valForTest = valFunction;
typeOFv = typeof valForTest;
if(typeOFv == "number"){
valForTest = $(window).width() < valFunction;
}
}
//end modification
if (valForTest) {
$("body").addClass("disabled-onepage-scroll");
$(document).unbind('mousewheel DOMMouseScroll MozMousePixelScroll');
el.swipeEvents().unbind("swipeDown swipeUp");
} else {
if($("body").hasClass("disabled-onepage-scroll")) {
$("body").removeClass("disabled-onepage-scroll");
$("html, body, .wrapper").animate({ scrollTop: 0 }, "fast");
}
el.swipeEvents().bind("swipeDown", function(event){
if (!$("body").hasClass("disabled-onepage-scroll")) event.preventDefault();
el.moveUp();
}).bind("swipeUp", function(event){
if (!$("body").hasClass("disabled-onepage-scroll")) event.preventDefault();
el.moveDown();
});
$(document).bind('mousewheel DOMMouseScroll MozMousePixelScroll', function(event) {
event.preventDefault();
var delta = event.originalEvent.wheelDelta || -event.originalEvent.detail;
init_scroll(event, delta);
});
}
}
function init_scroll(event, delta) {
deltaOfInterest = delta;
var timeNow = new Date().getTime();
// Cancel scroll if currently animating or within quiet period
if(timeNow - lastAnimation < quietPeriod + settings.animationTime) {
event.preventDefault();
return;
}
if (deltaOfInterest < 0) {
el.moveDown()
} else {
el.moveUp()
}
lastAnimation = timeNow;
}
// Prepare everything before binding wheel scroll
el.addClass("onepage-wrapper").css("position","relative");
$.each( sections, function(i) {
$(this).css({
position: "absolute",
top: topPos + "%"
}).addClass("section").attr("data-index", i+1);
$(this).css({
position: "absolute",
left: ( settings.direction == 'horizontal' )
? leftPos + "%"
: 0,
top: ( settings.direction == 'vertical' || settings.direction != 'horizontal' )
? topPos + "%"
: 0
});
if (settings.direction == 'horizontal')
leftPos = leftPos + 100;
else
topPos = topPos + 100;
if(settings.pagination == true) {
paginationList += "<li><a data-index='"+(i+1)+"' href='#" + (i+1) + "'></a></li>"
}
});
el.swipeEvents().bind("swipeDown", function(event){
if (!$("body").hasClass("disabled-onepage-scroll")) event.preventDefault();
el.moveUp();
}).bind("swipeUp", function(event){
if (!$("body").hasClass("disabled-onepage-scroll")) event.preventDefault();
el.moveDown();
});
// Create Pagination and Display Them
if (settings.pagination == true) {
if ($('ul.onepage-pagination').length < 1) $("<ul class='onepage-pagination'></ul>").prependTo("body");
if( settings.direction == 'horizontal' ) {
posLeft = (el.find(".onepage-pagination").width() / 2) * -1;
el.find(".onepage-pagination").css("margin-left", posLeft);
} else {
posTop = (el.find(".onepage-pagination").height() / 2) * -1;
el.find(".onepage-pagination").css("margin-top", posTop);
}
$('ul.onepage-pagination').html(paginationList);
}
if(window.location.hash != "" && window.location.hash != "#1") {
init_index = window.location.hash.replace("#", "")
if (parseInt(init_index) <= total && parseInt(init_index) > 0) {
$(settings.sectionContainer + "[data-index='" + init_index + "']").addClass("active")
$("body").addClass("viewing-page-"+ init_index)
if(settings.pagination == true) $(".onepage-pagination li a" + "[data-index='" + init_index + "']").addClass("active");
next = $(settings.sectionContainer + "[data-index='" + (init_index) + "']");
if(next) {
next.addClass("active")
if(settings.pagination == true) $(".onepage-pagination li a" + "[data-index='" + (init_index) + "']").addClass("active");
$("body")[0].className = $("body")[0].className.replace(/\bviewing-page-\d.*?\b/g, '');
$("body").addClass("viewing-page-"+next.data("index"))
if (history.replaceState && settings.updateURL == true) {
var href = window.location.href.substr(0,window.location.href.indexOf('#')) + "#" + (init_index);
history.pushState( {}, document.title, href );
}
}
pos = ((init_index - 1) * 100) * -1;
el.transformPage(settings, pos, init_index);
} else {
$(settings.sectionContainer + "[data-index='1']").addClass("active")
$("body").addClass("viewing-page-1")
if(settings.pagination == true) $(".onepage-pagination li a" + "[data-index='1']").addClass("active");
}
} else{
$(settings.sectionContainer + "[data-index='1']").addClass("active")
$("body").addClass("viewing-page-1")
if(settings.pagination == true) $(".onepage-pagination li a" + "[data-index='1']").addClass("active");
}
if(settings.pagination == true) {
$(".onepage-pagination li a").click(function (){
var page_index = $(this).data("index");
el.moveTo(page_index);
});
}
$(document).bind('mousewheel DOMMouseScroll MozMousePixelScroll', function(event) {
event.preventDefault();
var delta = event.originalEvent.wheelDelta || -event.originalEvent.detail;
if(!$("body").hasClass("disabled-onepage-scroll")) init_scroll(event, delta);
});
if(settings.responsiveFallback != false) {
$(window).resize(function() {
responsive();
});
responsive();
}
if(settings.keyboard == true) {
$(document).keydown(function(e) {
var tag = e.target.tagName.toLowerCase();
if (!$("body").hasClass("disabled-onepage-scroll")) {
switch(e.which) {
case 38:
if (tag != 'input' && tag != 'textarea') el.moveUp()
break;
case 40:
if (tag != 'input' && tag != 'textarea') el.moveDown()
break;
case 32: //spacebar
if (tag != 'input' && tag != 'textarea') el.moveDown()
break;
case 33: //pageg up
if (tag != 'input' && tag != 'textarea') el.moveUp()
break;
case 34: //page dwn
if (tag != 'input' && tag != 'textarea') el.moveDown()
break;
case 36: //home
el.moveTo(1);
break;
case 35: //end
el.moveTo(total);
break;
default: return;
}
}
});
}
if (typeof settings.init == 'function') settings.init();
return false;
}
}(window.jQuery);
/* END
OF JS
*/
THE CSS:
.onepage-pagination {
position: fixed;
top: 50%;
right: 30px;
@include translate3d(0, -50%, 0);
list-style: none;
margin: 0;
padding: 0;
z-index: 50;
display: none;
&.subheader-present {
top: calc(50% + 50px);
}
li {
display: block;
padding: 4px 0;
margin: 0;
a {
display: block;
width: 14px;
height: 14px;
border-radius: 7px;
border: 1px solid transparent;
position: relative;
&:hover {
border-color: rgba(255,255,255,.3);
}
&:after {
content: '';
display: block;
width: 6px;
height: 6px;
background: rgba(255,255,255,.3);
border-radius: 3px;
position: absolute;
top: 3px;
left: 3px;
}
&.active {
border-color: rgba(255,255,255,1);
&:hover {
border-color: rgba(255,255,255,1);
}
&:after {
background: rgba(255,255,255,1);
}
}
}
}
@include min-break($break-medium) {
display: block;
}
}
body.disabled-onepage-scroll, .disabled-onepage-scroll .onepage-wrapper {
position: inherit;
}
body.snap {
.subheader {
position: relative;
z-index: 30;
}
.header {
z-index: 15;
}
}
[role="main"] {
.snap & {
display: block;
position: static;
width: 100%;
height: auto;
overflow-x: visible !important;
min-height: 200px;
opacity: 0;
@include min-break($break-small) {
display: table;
height: 100vh;
position: relative;
min-height: 100vh;
}
@include max-break($break-small) {
@include transform(none !important);
height: auto !important;
}
&.loaded {
opacity: 1;
}
&>.row {
left: auto;
top: auto;
display: flex;
justify-content: center;
align-items: center;
max-width: 100%;
width: 100%;
height: auto;
margin: 0;
padding: 40px 15px;
@extend .linear-quick-transition;
@include min-break($break-small) {
padding: 0;
height: 100vh;
}
@include max-break($break-small) {
position: static !important;
}
&.section {
z-index: 5;
&>.row {
width: 100%;
height: auto;
margin: 0;
padding: 0;
@include min-break($break-small) {
padding: 0 35px;
&.no-padding {
padding: 0;
}
}
}
&.active {
z-index: 20;
}
}
}
}
}
我希望修复在移动设备上阻止的部分。