Scrollbars, IFrames on Mobile Device

Sometimes you have issues, that aren’t caused by you.

There are plenty of examples where you are the cause, but there are a few examples when you are honestly not the cause of an issue. I was involved with a project that required the use of an IFrame. I personally try to avoid IFrames at all cost, but in some instances you cannot. In this case, the IFrame contained dynamic content based on the user’s request, and response from the third party site. Since we did not have control over the 3rd party site, we did what we could on our end to accommodate various devices.

But as you can imagine, there are instances where your most practical solutions aren’t able to solve every issue.

We encountered an issue where outside of the main screen, you may need to scroll inside of the IFrame. In your web browser, traditionally you’ll see a second set of scrollbars – not ideal, but it gives your users the ability to see all the content.

Unfortunately, on mobile devices scroll bars do not appear and users have no idea that they need to scroll to access additional information. That’s when you have to hijack the scroll bar in some manner.

If you used some of the old school HTML properties back in the day you could customize scrollbars in IE to give them color, etc. Well to get your much needed scroll bars on mobile devices, you’ll have to do something similar. Using the WebKit tags inside of a media query (and along with some Javascript targeting) you can have scroll bars appear on your IFrame.

Here’s an example what I implemented thanks to StackOverflow.

 /* !important is needed sometimes */
 ::-webkit-scrollbar {
    width: 12px !important;
 }

 /* Track */
::-webkit-scrollbar-track {
   -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3) !important;
   -webkit-border-radius: 10px !important;
   border-radius: 10px !important;
 }

 /* Handle */
 ::-webkit-scrollbar-thumb {
   -webkit-border-radius: 10px !important;
   border-radius: 10px !important;
   background: #41617D !important; 
   -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5) !important; 

 }
 ::-webkit-scrollbar-thumb:window-inactive {
   background: #41617D !important; 
 }

 

Source:

Custom Scrollbars in WebKit

http://stackoverflow.com/questions/22907777/make-scrollbar-visible-in-mobile-browsers

dalain

About dalain

Dalain is a senior web application developer, entrepreneur and speaker that specializes in Technology for Businesses, STEM, StartUps, and Economic Development. As well as running a business and writing, he spends time volunteering in the community, supporting Black Businesses, listening to underground hip hop, and helping those in need.