我的网站无法在 iPhone 上滚动？

Question

我相信这可能与 css 有关。但也许是因为包含了视差 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 id。确保包含在内并具有最小高度。 Check out the Skrollr docs on that here.

至于您的菜单按钮，您的切换按钮上似乎没有任何事件监听器。添加点击/触摸事件以应用和移除切换类。

此外，这是任何移动设备宽度的问题，而不是 iOS 或 iPhone 特定的问题。我能够在 Chrome 桌面中复制该问题。