Member Avatar for Rizi004

Hi
i m developing app for IOS and Andriod in HTML5/CSS3 JAVASCRIPT. My header and footer are fixed now i want the middle part is scrollable, so bascially the middle scrolling is not working on IOS and Andriod, Please tell me how i can make it scrollable.

Waiting for your reply

Thanks

  • 2 Contributors
  • 4 Replies
  • 110 Views
  • 19 Hours Discussion Span
  • Latest Post Latest Post by Rizi004

Dani AI

Generated

A concise, practical pattern that fixes most mobile inner-scroll problems and a few diagnostics for cases where it still fails. As asked for code, here is a minimal setup you can drop into your page; it assumes a fixed header/footer and a single middle scrollable region.

Add a viewport meta:

<meta name="viewport" content="width=device-width, initial-scale=1">

Minimal CSS pattern:

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden; /* keep page from double-scrolling */
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 50px; /* adjust */
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px; /* adjust */
}

.content {
  position: absolute;
  top: 50px;    /* match .header height */
  bottom: 50px; /* match .footer height */
  left: 0;
  right: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch; /* enables native momentum scrolling on iOS */
}

Troubleshooting checklist and fallbacks:

  • The scroll container must have a constrained height (absolute positioning with top/bottom or an explicit height). If it is auto-height, mobile browsers won’t produce a touch-scrollable box.
  • Ensure the viewport meta is present.
  • Use -webkit-overflow-scrolling: touch for smooth iOS scrolling; detect support in JS with 'webkitOverflowScrolling' in document.documentElement.style and provide a JS fallback (for example iScroll) for older webviews that lack native support.
  • Older Android stock browsers and some legacy webviews have buggy position: fixed; if you must support them, consider a JS-based header/footer or moving the chrome inside the scrollable container.
  • Debug on real devices via remote tools (Chrome remote debugging for Android, Safari Web Inspector for iOS).

Useful references: MDN on -webkit-overflow-scrolling () and Chrome remote debugging (Chrome DevTools).

Recommended Answers

All 4 Replies

Member Avatar for pritaeas

Hard to help if you don't show what you have.

Member Avatar for Rizi004

____________________________
fixed header
____________________________

This
is
scrollable area

____________________________
fixed footer
____________________________

Member Avatar for pritaeas

I was referring to your HTML/CSS...

Member Avatar for Rizi004

Actually scroll in woriking in windows but not in IOS and Android phones

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.