Igor Kromin |   Consultant. Coder. Blogger. Tinkerer. Gamer.

Not long ago I wrote about Mobile Safari scrolling problem with an input field inside a fixed DIV and provided a solution that used a small amount of CSS to make the scrolling issue go away. This worked really well until I discovered that by setting overflow to auto caused the 'scroll' event to never fire. I rely on the scroll event firing so that I can dynamically load more data into a page, so this forced me into finding a better solution and here it is.

To reiterate the problem below is a video that shows how the background page jumps to the top whenever an input field gets focus (the field appears in a fixed position DIV)...

safarifixeddivissue2.png


My solution depends on having two main fixed position DIVs. The first one is the page 'header', the second is the page 'body wrapper'. These together take up 100% of the page height. Inside the 'header' is another DIV that holds all of the popup DIVs that I wish to display (not visible initially). The 'body wrapper' DIV is another fixed position DIV that is simply offset from the top by the value equal to the height of the 'header' DIV. This DIV has it's overflow-y set to 'scroll' so the scroll event can be captured. Inside the 'body wrapper' DIV is another DIV that contains the actual content of the page.

Now when I display a popup, since it's inside the header which is always visible, the 'body wrapper' isn't affected. Perfect!

Here's the HTML...
 HTML
<body>
<div class="tb_header">
...header content...
<div class="tb_popup_holder">
...popup divs...
</div>
</div>
<div class="tb_body_wrapper">
<div class="tb_body">
...body content...
</div>
</div>
</body>




...and the CSS (leaving out any extra styling)...
 CSS
html, body {
margin: 0 0;
height: 100%;
width: 100%;
}
.tb_header {
width: 100%;
height: 40px;
position: fixed;
left: 0;
top: 0;
}
.tb_body_wrapper {
padding-bottom: 40px;
height: 100%;
width: 100%;
position: fixed;
left: 0;
top: 40px;
overflow-y: scroll;
}
.tb_body {
width: 100%;
display: inline-block;
}


The 'body wrapper' has a 40px padding at the bottom so that any content that goes to the end of the page isn't cut off due to the 40px header.

Now I can listen to the scroll event on the 'body wrapper' like so:
 JavaScript
$('.tb_body_wrapper').scroll(function() {
// handle scroll
})


-i

Please leave your comments or feedback below!
comments powered by Disqus
Other posts you may like...
Hi! You can search my blog here ⤵
Or browse the recent top tags...

Recent Blog Posts

Using DeoxIT to repair old game catridges

WebLogic Maven Plugin - How to fix the MojoExecutionException: The artifact location was not specified

jPhotoFrame version 0.4 released with a whole new layout engine

Upcycling a couple of old broken lamps to create something amazing

A custom exception mapper and writer for a RESTful JAX-RS Jersey service

How to fix Plex error - Sorry there was a problem playing this item

Jersey JAX-RS filters and interceptors execution order for a POST request

Fix your Mac - users not showing on the macOS login screen when FileVault is enabled

BMB-012 Nanoblock T-Rex Skeleton Model assembly

Writing a custom MessageBodyReader to process POST body data with Jersey

Recent Galleries

BMB-012 Nanoblock T-Rex Skeleton Model assembly

Tiny Arcade revision 6 kit assembly and decal application

Atari Lynx repair - Part 5 - McWill LED screen mod installation

Atari Lynx repair - Part 4 - screen cover replacement

Atari Lynx repair - Part 2 - re-capping the motherboard

Atari Lynx repair - Part 3 - broken speaker replacement

Atari Lynx repair - Part 1 - introduction and case disassembly

Building a custom Atari Lynx game box storage shelf unit in a day

Protecting old Atari Lynx game boxes with snug fit plastic sleeves

Monument Valley 2 is released and does not disappoint

Blogs and Friends

Matt Moores Blog
Georgi's FlatPress Guide
Perplexing Permutations
The Security Sleuth
Ilia Rogatchevski
Travelling Fairy

Blog Activity

Blog Activity