Мой сайт нельзя прокручивать на iPhone?

Question

Я считаю, что это может иметь отношение к css. Но, возможно, это связано с включением библиотеки parallax javascript.

Сайт http://www.mediachicken.com

SASS здесь

@import "compass/css3"; 
/* Sticky footer styles 
-------------------------------------------------- */ 

html, 
body { 
    padding-top: 0; 
    height: 100%; 
    /* The html and body elements cannot have any padding or margin. */ 
} 

/* Wrapper for page content to push down footer */ 
#wrap { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    /* Negative indent footer by its height */ 
    margin: 0 auto -60px; 
    /* Pad bottom by footer height */ 
    padding: 0 0 60px; 
} 

/* Set the fixed height of the footer here */ 
#footer { 
    height: 60px; 
    width: 100%; 
    background-color: #f5f5f5; 
    z-index: 10; 
} 


.post-meta { 
    .list-inline { 
     li:first-child { 
      padding-left: 5px; 
     } 
     li:last-child { 
      padding-left: 10px; 
     } 
     li { 
      font-style: italic; 
      padding-right: 0; 
      padding-left: 0; 
     } 
    } 
} 


a.anchor { 
    display: block; 
    position: relative; 
    top: -65px; 
    visibility: hidden; 
} 

/* Custom page CSS 
-------------------------------------------------- */ 
/* Not required for template or sticky footer method. */ 

.container { 
    position: relative; 
    width: auto; 
    max-width: 680px; 
    padding: 0 15px; 
} 
.container .credit { 
    margin: 20px 0; 
} 

.mediachicken-svg { 
    max-width: 325px; 
    min-width: 36px; 
    position: fixed; 
    top: 7px; 
    left: 50%; 
    margin-left: -160px; 
    z-index: 200; 
} 

.header-spacer { 
    height: 340px; 
    &.sticky { 
     height: 410px; 
    } 
} 


.post-header { 

} 

#navigation { 
    width: 648px; 
    .container-fluid, .collapse {padding: 0;} 
    z-index: 100; 
    background-color: white; 
    border: none; 
    @include transition-property(box-shadow); 
    @include transition-duration(.5s); 
    &.sticky { 
     position: fixed; 
     top: 0; 
     border-top-right-radius: 0; 
     border-top-left-radius: 0; 
     box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2) 
    } 

    /* Nav bar items */ 
    ul.nav { 
     li a { 
      border-left: 3px solid rgba(0,0,0,0.05); 
     } 
    } 

} 

.postloop { 
    h2 { 
     font-size: 20px; 
    } 
} 

.post-header { 

} 

.post-body { 
    .post-meta { 
     font-style: italic; 
     color: rgba(0,0,0,0.5) 
    } 
    img { 
     max-width: 100%; 
     border-radius: 8px; 
    } 
    ul { 
     list-style: none; 
     margin-left: 0; 
     padding-left: 1em; 
     text-indent: 0em; 
    } 
    ul li:before { 
     content: "\2014 \020"; 
    } 
} 

.post-footer { 

} 


.adsbygoogle { 
    float: right; 
} 

А вот источник CoffeeScript, который загружается поместить строку меню в верхней части экрана, когда пользователь прокручивает достаточно далеко.

$ -> 
    nav = $("#navigation") 
    previous = 0 
    tick = 0 
    frozen = 0 

    minifyNav = -> 
    s = 36 
    $("#navigation").addClass "sticky" 
    $(".header-spacer").addClass "sticky" 

    handleScroll = -> 
    scroll = window.pageYOffset 
    navPos = $("#navigation").offset().top 
    distance = scroll - navPos 

    if (distance < previous - tick or distance > previous + tick) 
     if (-distance >= 36 and -distance < 330) 
     previous = distance 
     s = -(distance)*.90 
     else if scroll <= frozen 
     if $("#navigation").hasClass "sticky" 
      $("#navigation").removeClass "sticky" 
      $(".header-spacer").removeClass "sticky" 
     else if -distance <= 0 and not $("#navigation").hasClass "sticky" 
     frozen = 340 
     previous = frozen 
     minifyNav() 


    $("#navigation").width $(".container").width() 
    $(window).resize -> 
    $("#navigation").width $(".container").width() 

    $(window).scroll -> 
    handleScroll() 

любые идеи, что может заставлять его не прокручивать? Когда я масштабирую веб-страницу до конца на своем компьютере, она просто прокручивается. Кроме того, моя панель меню, кажется, не расширяется, когда я использую кнопку в мобильном представлении. Не уверен, почему это происходит, но это может быть глупой ошибкой с моей стороны. Я больше беспокоюсь о (отсутствии) прокрутки.

Answer 1

Я уверен, что проблема с прокруткой - отсутствие идентификатора # skrollr-body на элементе вашей страницы на мобильном устройстве. Убедитесь, что они включены и имеют минимальную высоту. Check out the Skrollr docs on that here.

Что касается кнопки меню, на вашем переключателе, похоже, нет прослушивателя событий. Добавьте событие click/touch для применения и удаления классов переключения.

Кроме того, это проблема с любой шириной мобильного устройства, а не с iOS или iPhone. Я смог дублировать эту проблему на рабочем столе Chrome.