Pop Up on Mobile Devices (Phones): Can't scroll

Having a little difficulty getting a pop up to scroll down on this page. If you click on the ‘Sizing Chart’ button on a phone device, you can scroll on the ‘Size Chart’ pop up. The content in the background (on the web page) scrolls, but not the sizing chart. Will I need to create a media query to force scrollbars or put in a fixed height or what could be causing this to work on tablets and desktop but not mobile phones?

Thank you.

Hi,

It seems to work on the iphone emulator OK. You may need to use two finger scrolling on a real device though. Some devices require you tap into the area and then scroll.

You could add scrollbars for webkit with this code:


/* This is the element whose content will be scrolled if necessary */
div {
 overflow:auto;
}
div::-webkit-scrollbar {
 height:12px;
}
div::-webkit-scrollbar-track {
 box-shadow:0 0 2px rgba(0,0,0,0.15) inset;
 background:#f0f0f0;
}
div::-webkit-scrollbar-thumb {
 border-radius:6px;
 background:#ccc;
}

Add the correct class of course and not just div.

I also read that -webkit-overflow-scrolling:touch; should make it a one finger scroll but haven’t tested yet.

I tested on a Samsung Galaxy S4 and am not able to get the Size Chart to scroll. I’ve tested on Browserstack, but seeing it on Browserstack on a desktop where I have access to a mouse to scroll is different than using it on a touch device like a phone.

I’ve applied your suggestion using the following and still don’t see a change:

#jcemediabox-popup-page::-webkit-scrollbar {height:12px}
#jcemediabox-popup-page::-webkit-scrollbar-track {box-shadow:0 0 2px rgba(0,0,0,0.15) inset; background:#f0f0f0}
#jcemediabox-popup-page::-webkit-scrollbar-thumb {border-radius:6px; background:#ccc}

Maybe I’m applying to the wrong element.

The code I gave was for -webkit only so won’t affect non webkit browsers and I don’t know what browser the galaxy has. The code above merely shows the scrollbar on the element by default on an iphone so that the user knows that they can scroll it.

The sizing chart doesn’t seem to be clickable any more on the iphone emulator so I borrowed my wife’s iphone and its not clickable there either so I don’t know what has changed since I last looked as it was opening the popup ok before.

I’m not sure that browserstack with a mouse is going to give good results either whereas the iphone simulator is about 99% correct but of course nothing beats the real device.

Mobiles hate fixed elements and scrolling elements so maybe you could set up some media queries to make the element non fixed (position:absolute) on mobile and remove the overflow so that all of it is visible and then scrolling won’t be an issue. Just apply it for smaller viewports.

Thanks, Paul O’B. I’ll work on getting the fixed elements adjusted and see if that solves the problem. If not, then I’ll have to resort to some other method(s).