SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Guru
    Join Date
    Jul 2003
    Location
    england
    Posts
    819
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Question 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.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,295
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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:
    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.

  3. #3
    SitePoint Guru
    Join Date
    Jul 2003
    Location
    england
    Posts
    819
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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.
    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:

    Code:
    #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.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,295
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.

  5. #5
    SitePoint Guru
    Join Date
    Jul 2003
    Location
    england
    Posts
    819
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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).


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •