CODEWITHSUNDEEP
javascriptjqueryhtmlcssmobile
blaineh
blaineh

Reputation: 2323

perfect-scrollbar area doesn't scroll on mobile

I've used meteorjs to build my website, blainehansenpiano.com, and it works and looks good on browsers and ipad. I'm using the perfect-scrollbar on the scrollable areas, and it is working fine.

I'm also using bootstrap3, so my site can be easily viewed on mobile. I have this template:

<template name="home">
    <div class="row body-film">
        <div class="col-sm-7">
            {{> backgroundPictures}}
        </div>
        <div class="col-sm-5 block-film scroller">
            <div id="newsfeed">
                ...
            </div>
        </div>
    </div>
</template>

Along with this less:

html, body, .container-fluid {
    .fill-height();
}
.body-film {
    .fill-height();
    background-color: @color;
}
.block-film {
    .fill-height();
    background-color: @different-color; 
}

.fill-height {
    height: 100%;
}

.scroller {
    .fill-height();
    overflow-y: hidden;
}

@media (max-width: @screen-xs-max) {
    html, body, .container-fluid, .body-film, .block-film, .scroller {
        height: auto !important;
        overflow-y: visible !important;
    }
}

The intended behavior is that while the site is sized from .col-sm to .col-lg, the blocks are sized to the window and the scrollbar handles all the movement. Then when the site is sized at .col-xs the columns are broken into blocks, the height and overflow are changed back, and that turns off the scrollbar and lets the native behavior take over.

On my browser this works great. When I resize my window to that small level, no scrollbars are displayed and things scroll naturally.

However, when I try this on mobile browsers (all of them that I've tried), the .block-film area that had the scroller attached to it simply doesn't respond to touch scrolls. If you scroll down into that area, you just get stuck.

What could be causing this?

Upvotes: 1

Views: 7269

Answers (2)

blaineh
blaineh

Reputation: 2323

This is working perfectly. The window.innerWidth lines up exactly with the Bootstrap column breakpoint. 

var is_xs = window.innerWidth < 768;
if (!is_xs) {
    // initialize scroller
}

Upvotes: 0

elzi
elzi

Reputation: 5672

As per the comments, since not calling perfect scroller on mobile is a valid solution, try doing some user agent detection as such:

var is_mobile = ((/Mobile|iPhone|iPod|BlackBerry|Windows Phone/i).test(navigator.userAgent || navigator.vendor || window.opera) ? true : false);

if ( !is_mobile ) {
  // whatever the init call is
  perfectScroller.init()
}

Upvotes: 3

Related Questions