2015-01-25 5 views
2

Я следил за инструкциями на веб-сайте Skrollr, а также в этом вопросе (How to fix Skrollr on Mobile?). Моя проблема в том, что когда я добавляю id = "scrollr-body" в свой тег тела, прокрутка перестает работать повсюду.Skrollr iPad & skrollr-body

Это код, я использую в сноске:

<script type="text/javascript"> 

skrollrCheck = function() { 
var winWidth  = window.innerWidth; 
var winHeight  = window.innerHeight; 

if(winWidth >= 768) { 
if(document.body.id !== 'skrollr-body') { 
    document.body.id = 'skrollr-body'; 
    // Init Skrollr 
    skrollr.init({ 
     forceHeight: false,//disable setting height on body 
     mobileDeceleration:0.04, 
     smoothScrolling:true, 
     render: function(data) { 
      //Debugging - Log the current scroll position. 
      //console.log('data.curTop: ' + data.curTop); 
     } 
    }); 
} 


if(winWidth > winHeight) { 
    console.log('orientation is landscape'); 
    skrollr.get().refresh(); 
} else if (winWidth < winHeight) { 
    console.log('orientation is portrait'); 
    skrollr.get().refresh(); 
} 
} else if (winWidth < 768){ 
// Destroy skrollr for screens less than 600px 
if(document.body.id === 'skrollr-body') { 
    skrollr.init().destroy(); 
    document.body.id = ''; 
} 
} 
}; 

//Initialize skrollr, but only if it exists. 
if(typeof skrollr !== typeof undefined){ 
// INITIALIZE 
window.onload = skrollrCheck(); 
window.addEventListener('resize', skrollrCheck);//listens for resize,  
and refreshes skrollr 
window.addEventListener('orientationchange', skrollrCheck);//listens 
for  
orientation change, and refreshes skrollr 
console.log('skrollr active!'); 
} else { 
console.log('skrollr is did not load.'); 
} 

</script> 

Если удалить идентификатор scrollr тела из тела тега, параллакс скроллинга отлично работает на рабочем столе, но прокрутка не работает все на iPad. Если я его добавлю, параллакс исчезает повсюду, но iPad отлично работает. Есть идеи? Благодаря!

+0

Если это помогает вообще, вот сайт, что у меня проблемы с: HTTP: // WWW. jmakhotels.com. – hudsonian

+0

У кого-нибудь есть идеи - или, по крайней мере, как я могу использовать js, чтобы гарантировать, что только каждый появляется на не-iOS/не-Android? Благодаря! – hudsonian

+0

Прочитайте это предложение вслух (из сообщения, которое вы связали) «Вам нужно обернуть весь свой контент в элементе с идентификатором skrollr-body». Вам нужен оберточный элемент, например div. – Prinzhorn

ответ

1

Ну, я пошел с более простой версией коды в сноске:

<script type="text/javascript" src="js/skrollr.js"></script> 
<script type="text/javascript"> 
skrollr.init({ 
smoothScrolling: false 
}); 

И вместо того, чтобы динамически вставить skrollr-тело в теге, я просто обернут все страницах содержание в:

<div id="skrollr-body"> 

UPDATE

Это было еще не скроллинг с последним iPad3, так что я теперь я использую следующее:

<script type="text/javascript"> 

if(!(/Android|iPhone|iPad|iPod|BlackBerry|Windows Phone/i).test(navigator.userAgent || navigator.vendor || window.opera)){ 
skrollr.init({ 
forceHeight: false 
}); 
} 

</script> 
+0

Обтекание содержимого страницы в '

' fixed iOS devices for me. That and removing an extra '
' tag ... – myol

Смежные вопросы