如何做出header，footer固定定位后让main主体部分可以滑动，在微信浏览器中滑动到最后不出现黑边的情况
| <!doctype html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| </head> | |
|
<body> <div class="header"></div> |
|
| <div class="scroll main" style="position:absolute; overflow-y:scroll; -webkit-overflow-scrolling: touch; top:0; left:0; bottom:0; right:0">注释：scroll是必须添加的类名,overflow:scroll; -webkit-overflow-scrolling: touch;让屏幕滑动更顺畅，只是好像这个参数加了在苹果机上失效了就。 | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tortor urna, euismod ac pretium id, ornare sit amet elit. Suspendisse in eleifend tellus, et semper dolor. Aliquam nec convallis orci. Pellentesque ultricies, odio id tincidunt tempus, leo nisl fermentum orci, at pulvinar mauris diam vel urna. Nulla dui turpis, aliquam tempor massa ac, venenatis facilisis enim. Pellentesque finibus ligula a odio molestie, eget blandit augue iaculis. Maecenas finibus tristique iaculis. Mauris commodo, neque suscipit eleifend mollis, ligula arcu molestie quam, aliquam aliquam nulla elit pulvinar libero. Donec accumsan, orci et eleifend imperdiet, diam lacus luctus lacus, eu tempus massa massa ut lectus. Integer interdum augue at ex tristique lobortis. Pellentesque nec dignissim diam, vel mollis eros. Morbi maximus, arcu a porttitor lacinia, ante ipsum semper tellus, sed aliquam elit ligula et diam. Etiam id nisi ut est consequat tincidunt. Fusce dictum ipsum sit amet nulla fringilla, non commodo orci tincidunt. | |
| Nam finibus varius rhoncus. Fusce vel leo pulvinar mauris ullamcorper eleifend eu ut massa. Morbi vestibulum erat eget enim dictum ultrices. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In non purus turpis. In bibendum gravida odio viverra venenatis. Aenean id magna iaculis, iaculis ante vitae, maximus ipsum. Duis fermentum enim eget elit efficitur, eu bibendum nibh sollicitudin. | |
| Aliquam gravida rutrum risus, id molestie lectus efficitur vitae. Nullam sollicitudin felis tincidunt ultrices mattis. Donec euismod rhoncus libero, vitae facilisis lacus pellentesque at. Donec vel elementum nisl. Aenean nulla lorem, vehicula at faucibus vitae, imperdiet sit amet tellus. Proin odio magna, luctus at nibh et, commodo placerat justo. Morbi tincidunt interdum eros tempus varius. Nullam consequat mauris vestibulum nisl tempor suscipit eget sed nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur at venenatis est. Proin lorem sem, rutrum quis porta non, luctus eget ipsum. Vestibulum feugiat sagittis nunc eu vulputate. Curabitur eu enim maximus, tincidunt nibh ac, posuere libero. Nunc vitae vestibulum mi. Suspendisse lacus nulla, feugiat a libero at, malesuada mollis lacus. Nulla eu aliquam enim. | |
| Phasellus congue arcu id lorem maximus, eu pharetra eros rutrum. Vestibulum pretium ullamcorper erat, a scelerisque tortor iaculis quis. Etiam varius imperdiet ullamcorper. Pellentesque ac tempus leo. Mauris sollicitudin vel odio quis fringilla. Pellentesque tempor ligula at fermentum scelerisque. Nunc aliquam, enim vel congue ultrices, odio diam dictum ante, id pellentesque magna ex in arcu. Pellentesque non volutpat nisi, aliquam tincidunt diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce maximus tempor tortor, nec feugiat odio tincidunt ut. Integer rhoncus auctor justo sit amet iaculis. | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tortor urna, euismod ac pretium id, ornare sit amet elit. Suspendisse in eleifend tellus, et semper dolor. Aliquam nec convallis orci. Pellentesque ultricies, odio id tincidunt tempus, leo nisl fermentum orci, at pulvinar mauris diam vel urna. Nulla dui turpis, aliquam tempor massa ac, venenatis facilisis enim. Pellentesque finibus ligula a odio molestie, eget blandit augue iaculis. Maecenas finibus tristique iaculis. Mauris commodo, neque suscipit eleifend mollis, ligula arcu molestie quam, aliquam aliquam nulla elit pulvinar libero. Donec accumsan, orci et eleifend imperdiet, diam lacus luctus lacus, eu tempus massa massa ut lectus. Integer interdum augue at ex tristique lobortis. Pellentesque nec dignissim diam, vel mollis eros. Morbi maximus, arcu a porttitor lacinia, ante ipsum semper tellus, sed aliquam elit ligula et diam. Etiam id nisi ut est consequat tincidunt. Fusce dictum ipsum sit amet nulla fringilla, non commodo orci tincidunt. | |
| Nam finibus varius rhoncus. Fusce vel leo pulvinar mauris ullamcorper eleifend eu ut massa. Morbi vestibulum erat eget enim dictum ultrices. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In non purus turpis. In bibendum gravida odio viverra venenatis. Aenean id magna iaculis, iaculis ante vitae, maximus ipsum. Duis fermentum enim eget elit efficitur, eu bibendum nibh sollicitudin. | |
| Aliquam gravida rutrum risus, id molestie lectus efficitur vitae. Nullam sollicitudin felis tincidunt ultrices mattis. Donec euismod rhoncus libero, vitae facilisis lacus pellentesque at. Donec vel elementum nisl. Aenean nulla lorem, vehicula at faucibus vitae, imperdiet sit amet tellus. Proin odio magna, luctus at nibh et, commodo placerat justo. Morbi tincidunt interdum eros tempus varius. Nullam consequat mauris vestibulum nisl tempor suscipit eget sed nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur at venenatis est. Proin lorem sem, rutrum quis porta non, luctus eget ipsum. Vestibulum feugiat sagittis nunc eu vulputate. Curabitur eu enim maximus, tincidunt nibh ac, posuere libero. Nunc vitae vestibulum mi. Suspendisse lacus nulla, feugiat a libero at, malesuada mollis lacus. Nulla eu aliquam enim. | |
| Phasellus congue arcu id lorem maximus, eu pharetra eros rutrum. Vestibulum pretium ullamcorper erat, a scelerisque tortor iaculis quis. Etiam varius imperdiet ullamcorper. Pellentesque ac tempus leo. Mauris sollicitudin vel odio quis fringilla. Pellentesque tempor ligula at fermentum scelerisque. Nunc aliquam, enim vel congue ultrices, odio diam dictum ante, id pellentesque magna ex in arcu. Pellentesque non volutpat nisi, aliquam tincidunt diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce maximus tempor tortor, nec feugiat odio tincidunt ut. Integer rhoncus auctor justo sit amet iaculis. | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tortor urna, euismod ac pretium id, ornare sit amet elit. Suspendisse in eleifend tellus, et semper dolor. Aliquam nec convallis orci. Pellentesque ultricies, odio id tincidunt tempus, leo nisl fermentum orci, at pulvinar mauris diam vel urna. Nulla dui turpis, aliquam tempor massa ac, venenatis facilisis enim. Pellentesque finibus ligula a odio molestie, eget blandit augue iaculis. Maecenas finibus tristique iaculis. Mauris commodo, neque suscipit eleifend mollis, ligula arcu molestie quam, aliquam aliquam nulla elit pulvinar libero. Donec accumsan, orci et eleifend imperdiet, diam lacus luctus lacus, eu tempus massa massa ut lectus. Integer interdum augue at ex tristique lobortis. Pellentesque nec dignissim diam, vel mollis eros. Morbi maximus, arcu a porttitor lacinia, ante ipsum semper tellus, sed aliquam elit ligula et diam. Etiam id nisi ut est consequat tincidunt. Fusce dictum ipsum sit amet nulla fringilla, non commodo orci tincidunt. | |
| Nam finibus varius rhoncus. Fusce vel leo pulvinar mauris ullamcorper eleifend eu ut massa. Morbi vestibulum erat eget enim dictum ultrices. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In non purus turpis. In bibendum gravida odio viverra venenatis. Aenean id magna iaculis, iaculis ante vitae, maximus ipsum. Duis fermentum enim eget elit efficitur, eu bibendum nibh sollicitudin. | |
| Aliquam gravida rutrum risus, id molestie lectus efficitur vitae. Nullam sollicitudin felis tincidunt ultrices mattis. Donec euismod rhoncus libero, vitae facilisis lacus pellentesque at. Donec vel elementum nisl. Aenean nulla lorem, vehicula at faucibus vitae, imperdiet sit amet tellus. Proin odio magna, luctus at nibh et, commodo placerat justo. Morbi tincidunt interdum eros tempus varius. Nullam consequat mauris vestibulum nisl tempor suscipit eget sed nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur at venenatis est. Proin lorem sem, rutrum quis porta non, luctus eget ipsum. Vestibulum feugiat sagittis nunc eu vulputate. Curabitur eu enim maximus, tincidunt nibh ac, posuere libero. Nunc vitae vestibulum mi. Suspendisse lacus nulla, feugiat a libero at, malesuada mollis lacus. Nulla eu aliquam enim. | |
| Phasellus congue arcu id lorem maximus, eu pharetra eros rutrum. Vestibulum pretium ullamcorper erat, a scelerisque tortor iaculis quis. Etiam varius imperdiet ullamcorper. Pellentesque ac tempus leo. Mauris sollicitudin vel odio quis fringilla. Pellentesque tempor ligula at fermentum scelerisque. Nunc aliquam, enim vel congue ultrices, odio diam dictum ante, id pellentesque magna ex in arcu. Pellentesque non volutpat nisi, aliquam tincidunt diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce maximus tempor tortor, nec feugiat odio tincidunt ut. Integer rhoncus auctor justo sit amet iaculis. | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tortor urna, euismod ac pretium id, ornare sit amet elit. Suspendisse in eleifend tellus, et semper dolor. Aliquam nec convallis orci. Pellentesque ultricies, odio id tincidunt tempus, leo nisl fermentum orci, at pulvinar mauris diam vel urna. Nulla dui turpis, aliquam tempor massa ac, venenatis facilisis enim. Pellentesque finibus ligula a odio molestie, eget blandit augue iaculis. Maecenas finibus tristique iaculis. Mauris commodo, neque suscipit eleifend mollis, ligula arcu molestie quam, aliquam aliquam nulla elit pulvinar libero. Donec accumsan, orci et eleifend imperdiet, diam lacus luctus lacus, eu tempus massa massa ut lectus. Integer interdum augue at ex tristique lobortis. Pellentesque nec dignissim diam, vel mollis eros. Morbi maximus, arcu a porttitor lacinia, ante ipsum semper tellus, sed aliquam elit ligula et diam. Etiam id nisi ut est consequat tincidunt. Fusce dictum ipsum sit amet nulla fringilla, non commodo orci tincidunt. | |
| Nam finibus varius rhoncus. Fusce vel leo pulvinar mauris ullamcorper eleifend eu ut massa. Morbi vestibulum erat eget enim dictum ultrices. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In non purus turpis. In bibendum gravida odio viverra venenatis. Aenean id magna iaculis, iaculis ante vitae, maximus ipsum. Duis fermentum enim eget elit efficitur, eu bibendum nibh sollicitudin. | |
| Aliquam gravida rutrum risus, id molestie lectus efficitur vitae. Nullam sollicitudin felis tincidunt ultrices mattis. Donec euismod rhoncus libero, vitae facilisis lacus pellentesque at. Donec vel elementum nisl. Aenean nulla lorem, vehicula at faucibus vitae, imperdiet sit amet tellus. Proin odio magna, luctus at nibh et, commodo placerat justo. Morbi tincidunt interdum eros tempus varius. Nullam consequat mauris vestibulum nisl tempor suscipit eget sed nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur at venenatis est. Proin lorem sem, rutrum quis porta non, luctus eget ipsum. Vestibulum feugiat sagittis nunc eu vulputate. Curabitur eu enim maximus, tincidunt nibh ac, posuere libero. Nunc vitae vestibulum mi. Suspendisse lacus nulla, feugiat a libero at, malesuada mollis lacus. Nulla eu aliquam enim. | |
| Phasellus congue arcu id lorem maximus, eu pharetra eros rutrum. Vestibulum pretium ullamcorper erat, a scelerisque tortor iaculis quis. Etiam varius imperdiet ullamcorper. Pellentesque ac tempus leo. Mauris sollicitudin vel odio quis fringilla. Pellentesque tempor ligula at fermentum scelerisque. Nunc aliquam, enim vel congue ultrices, odio diam dictum ante, id pellentesque magna ex in arcu. Pellentesque non volutpat nisi, aliquam tincidunt diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce maximus tempor tortor, nec feugiat odio tincidunt ut. Integer rhoncus auctor justo sit amet iaculis. | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tortor urna, euismod ac pretium id, ornare sit amet elit. Suspendisse in eleifend tellus, et semper dolor. Aliquam nec convallis orci. Pellentesque ultricies, odio id tincidunt tempus, leo nisl fermentum orci, at pulvinar mauris diam vel urna. Nulla dui turpis, aliquam tempor massa ac, venenatis facilisis enim. Pellentesque finibus ligula a odio molestie, eget blandit augue iaculis. Maecenas finibus tristique iaculis. Mauris commodo, neque suscipit eleifend mollis, ligula arcu molestie quam, aliquam aliquam nulla elit pulvinar libero. Donec accumsan, orci et eleifend imperdiet, diam lacus luctus lacus, eu tempus massa massa ut lectus. Integer interdum augue at ex tristique lobortis. Pellentesque nec dignissim diam, vel mollis eros. Morbi maximus, arcu a porttitor lacinia, ante ipsum semper tellus, sed aliquam elit ligula et diam. Etiam id nisi ut est consequat tincidunt. Fusce dictum ipsum sit amet nulla fringilla, non commodo orci tincidunt. | |
| Nam finibus varius rhoncus. Fusce vel leo pulvinar mauris ullamcorper eleifend eu ut massa. Morbi vestibulum erat eget enim dictum ultrices. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In non purus turpis. In bibendum gravida odio viverra venenatis. Aenean id magna iaculis, iaculis ante vitae, maximus ipsum. Duis fermentum enim eget elit efficitur, eu bibendum nibh sollicitudin. | |
| Aliquam gravida rutrum risus, id molestie lectus efficitur vitae. Nullam sollicitudin felis tincidunt ultrices mattis. Donec euismod rhoncus libero, vitae facilisis lacus pellentesque at. Donec vel elementum nisl. Aenean nulla lorem, vehicula at faucibus vitae, imperdiet sit amet tellus. Proin odio magna, luctus at nibh et, commodo placerat justo. Morbi tincidunt interdum eros tempus varius. Nullam consequat mauris vestibulum nisl tempor suscipit eget sed nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur at venenatis est. Proin lorem sem, rutrum quis porta non, luctus eget ipsum. Vestibulum feugiat sagittis nunc eu vulputate. Curabitur eu enim maximus, tincidunt nibh ac, posuere libero. Nunc vitae vestibulum mi. Suspendisse lacus nulla, feugiat a libero at, malesuada mollis lacus. Nulla eu aliquam enim. | |
| Phasellus congue arcu id lorem maximus, eu pharetra eros rutrum. Vestibulum pretium ullamcorper erat, a scelerisque tortor iaculis quis. Etiam varius imperdiet ullamcorper. Pellentesque ac tempus leo. Mauris sollicitudin vel odio quis fringilla. Pellentesque tempor ligula at fermentum scelerisque. Nunc aliquam, enim vel congue ultrices, odio diam dictum ante, id pellentesque magna ex in arcu. Pellentesque non volutpat nisi, aliquam tincidunt diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce maximus tempor tortor, nec feugiat odio tincidunt ut. Integer rhoncus auctor justo sit amet iaculis. | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tortor urna, euismod ac pretium id, ornare sit amet elit. Suspendisse in eleifend tellus, et semper dolor. Aliquam nec convallis orci. Pellentesque ultricies, odio id tincidunt tempus, leo nisl fermentum orci, at pulvinar mauris diam vel urna. Nulla dui turpis, aliquam tempor massa ac, venenatis facilisis enim. Pellentesque finibus ligula a odio molestie, eget blandit augue iaculis. Maecenas finibus tristique iaculis. Mauris commodo, neque suscipit eleifend mollis, ligula arcu molestie quam, aliquam aliquam nulla elit pulvinar libero. Donec accumsan, orci et eleifend imperdiet, diam lacus luctus lacus, eu tempus massa massa ut lectus. Integer interdum augue at ex tristique lobortis. Pellentesque nec dignissim diam, vel mollis eros. Morbi maximus, arcu a porttitor lacinia, ante ipsum semper tellus, sed aliquam elit ligula et diam. Etiam id nisi ut est consequat tincidunt. Fusce dictum ipsum sit amet nulla fringilla, non commodo orci tincidunt. | |
| Nam finibus varius rhoncus. Fusce vel leo pulvinar mauris ullamcorper eleifend eu ut massa. Morbi vestibulum erat eget enim dictum ultrices. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In non purus turpis. In bibendum gravida odio viverra venenatis. Aenean id magna iaculis, iaculis ante vitae, maximus ipsum. Duis fermentum enim eget elit efficitur, eu bibendum nibh sollicitudin. | |
| Aliquam gravida rutrum risus, id molestie lectus efficitur vitae. Nullam sollicitudin felis tincidunt ultrices mattis. Donec euismod rhoncus libero, vitae facilisis lacus pellentesque at. Donec vel elementum nisl. Aenean nulla lorem, vehicula at faucibus vitae, imperdiet sit amet tellus. Proin odio magna, luctus at nibh et, commodo placerat justo. Morbi tincidunt interdum eros tempus varius. Nullam consequat mauris vestibulum nisl tempor suscipit eget sed nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur at venenatis est. Proin lorem sem, rutrum quis porta non, luctus eget ipsum. Vestibulum feugiat sagittis nunc eu vulputate. Curabitur eu enim maximus, tincidunt nibh ac, posuere libero. Nunc vitae vestibulum mi. Suspendisse lacus nulla, feugiat a libero at, malesuada mollis lacus. Nulla eu aliquam enim. | |
| Phasellus congue arcu id lorem maximus, eu pharetra eros rutrum. Vestibulum pretium ullamcorper erat, a scelerisque tortor iaculis quis. Etiam varius imperdiet ullamcorper. Pellentesque ac tempus leo. Mauris sollicitudin vel odio quis fringilla. Pellentesque tempor ligula at fermentum scelerisque. Nunc aliquam, enim vel congue ultrices, odio diam dictum ante, id pellentesque magna ex in arcu. Pellentesque non volutpat nisi, aliquam tincidunt diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce maximus tempor tortor, nec feugiat odio tincidunt ut. Integer rhoncus auctor justo sit amet iaculis. | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tortor urna, euismod ac pretium id, ornare sit amet elit. Suspendisse in eleifend tellus, et semper dolor. Aliquam nec convallis orci. Pellentesque ultricies, odio id tincidunt tempus, leo nisl fermentum orci, at pulvinar mauris diam vel urna. Nulla dui turpis, aliquam tempor massa ac, venenatis facilisis enim. Pellentesque finibus ligula a odio molestie, eget blandit augue iaculis. Maecenas finibus tristique iaculis. Mauris commodo, neque suscipit eleifend mollis, ligula arcu molestie quam, aliquam aliquam nulla elit pulvinar libero. Donec accumsan, orci et eleifend imperdiet, diam lacus luctus lacus, eu tempus massa massa ut lectus. Integer interdum augue at ex tristique lobortis. Pellentesque nec dignissim diam, vel mollis eros. Morbi maximus, arcu a porttitor lacinia, ante ipsum semper tellus, sed aliquam elit ligula et diam. Etiam id nisi ut est consequat tincidunt. Fusce dictum ipsum sit amet nulla fringilla, non commodo orci tincidunt. | |
| Nam finibus varius rhoncus. Fusce vel leo pulvinar mauris ullamcorper eleifend eu ut massa. Morbi vestibulum erat eget enim dictum ultrices. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In non purus turpis. In bibendum gravida odio viverra venenatis. Aenean id magna iaculis, iaculis ante vitae, maximus ipsum. Duis fermentum enim eget elit efficitur, eu bibendum nibh sollicitudin. | |
| Aliquam gravida rutrum risus, id molestie lectus efficitur vitae. Nullam sollicitudin felis tincidunt ultrices mattis. Donec euismod rhoncus libero, vitae facilisis lacus pellentesque at. Donec vel elementum nisl. Aenean nulla lorem, vehicula at faucibus vitae, imperdiet sit amet tellus. Proin odio magna, luctus at nibh et, commodo placerat justo. Morbi tincidunt interdum eros tempus varius. Nullam consequat mauris vestibulum nisl tempor suscipit eget sed nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur at venenatis est. Proin lorem sem, rutrum quis porta non, luctus eget ipsum. Vestibulum feugiat sagittis nunc eu vulputate. Curabitur eu enim maximus, tincidunt nibh ac, posuere libero. Nunc vitae vestibulum mi. Suspendisse lacus nulla, feugiat a libero at, malesuada mollis lacus. Nulla eu aliquam enim. | |
| Phasellus congue arcu id lorem maximus, eu pharetra eros rutrum. Vestibulum pretium ullamcorper erat, a scelerisque tortor iaculis quis. Etiam varius imperdiet ullamcorper. Pellentesque ac tempus leo. Mauris sollicitudin vel odio quis fringilla. Pellentesque tempor ligula at fermentum scelerisque. Nunc aliquam, enim vel congue ultrices, odio diam dictum ante, id pellentesque magna ex in arcu. Pellentesque non volutpat nisi, aliquam tincidunt diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce maximus tempor tortor, nec feugiat odio tincidunt ut. Integer rhoncus auctor justo sit amet iaculis. | |
|
</div> <div style="positon:fixed; bottom:0" class="footer"></div> |
|
| </body> | |
| <script> | |
| var overscroll = function(el) { | |
| el.addEventListener('touchstart', function() { | |
| var top = el.scrollTop | |
| , totalScroll = el.scrollHeight | |
| , currentScroll = top + el.offsetHeight | |
| //If we're at the top or the bottom of the containers | |
| //scroll, push up or down one pixel. | |
| // | |
| //this prevents the scroll from "passing through" to | |
| //the body. | |
| if(top === 0) { | |
| el.scrollTop = 1 | |
| } else if(currentScroll === totalScroll) { | |
| el.scrollTop = top - 1 | |
| } | |
| }) | |
| el.addEventListener('touchmove', function(evt) { | |
| //if the content is actually scrollable, i.e. the content is long enough | |
| //that scrolling can occur | |
| if(el.offsetHeight < el.scrollHeight) | |
| evt._isScroller = true | |
| }) | |
| } | |
| overscroll(document.querySelector('.scroll')); | |
| document.body.addEventListener('touchmove', function(evt) { | |
| //In this case, the default behavior is scrolling the body, which | |
| //would result in an overflow. Since we don't want that, we preventDefault. | |
| if(!evt._isScroller) { | |
| evt.preventDefault() | |
| } | |
| }) | |
| </script> | |
| </html> |
如何做出header，footer固定定位后让main主体部分可以滑动，在微信浏览器中滑动到最后不出现黑边的情况的更多相关文章
- input固定定位后，当input框获取到焦点时，会离开手机软键盘的解决方法
前些天做页面时候遇到这样一个问题,将input框用position:fixed固定定位在最底部的时候,当Input获取焦点的时候,input框离开了手机软键盘,而不是吸附在软键盘上,效果如下图: 找了 ...
- 固定定位导致$(window).scrollTop();获取滚动后到顶部距离总是为0
如下移动端索引列表页面(点击某元素后弹出的页面) 我想用 $(window).scrollTop(); 获取页面滚动后距离顶部的距离,但获取到的值总是0 期间查了很久,但都无疾而终,后来看到一篇 ...
- 行内元素进行绝对(absolute)，固定(fixed)定位后会变成块级元素·
行内元素进行绝对定位后会变成块级元素· position:absolute; <!DOCTYPE html><html lang="en"><head ...
- 固定定位下的div水平居中
发现了一个之前未留意的知识点,做个笔记. 当一个块级元素的父元素开启了flex布局后,我们可以很轻松的将这个元素居中对齐,可以在父元素上加 justify-content: center; align ...
- html中header,footer分别固定在顶部和底部
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>page01</title> 5 <styl ...
- iOS 固定定位不兼容、input获取焦点后位置不对。
第一次写博客~ 大家悠着看,有则改之,无则加冕,对不对的给个回复,让我知道你的存在. 在做活动页的时候,经常会碰到一些需要弹出显示的输入框(情节前提:本人安卓机~),前天自己写的时候自己调试没问题后 ...
- [css 实践篇] 解决悬浮的<header> <footer>遮挡内容的处理技巧
我写的实践篇 都是自己在实践项目所遇到的 "拦路虎" 还是很有借鉴的意义的.(实践才是检验真理的唯一标准呀),废话不多说,进去正题 position: fixed 绝对固定底部后会 ...
- 固定定位 z-index iconfont的使用 043
固定定位 现象 脱标 提升层级 将盒子固定住 参考点 浏览器的左上角 : <!DOCTYPE html> <html lang="en"> <he ...
- 理解CSS相对定位和固定定位
× 目录 [1]相对定位 [2]固定定位 前面的话 一般地,说起定位元素是指position不为static的元素,包括relative.absolute和fixed.前面已经详细介绍过absolut ...
随机推荐
- document.body.clientHeight和 document.documentElement.clientHeight 的区别
1.javascript中的 document.body.clientHeight 和 document.documentElement.clientHeight 的区别 在往同事负责的页面添加我的功 ...
- Jquery入门指南教程
林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka jQuery,顾名思义,也就是JavaScript和查询(Query),即是辅助JavaScr ...
- 折纸问题java实现
/** * 折纸问题 这段代码写的太low了 本人水平有限 哎... 全是字符串了 * @param n * @return * @date 2016-10-7 * @author shaobn */ ...
- C#.Net 中的 new 的几个用法
之前面试的时候,有人问过我这个问题,当时自己只记得两种.后来上msdn看了下,发现有三种,第三种用法基本没怎么用过 这里先贴出来: 三种用法如下: 在 C# 中,new 关键字可用作运算符.修饰符或约 ...
- android 文字图片合成
引用:http://blog.csdn.net/cq361106306/article/details/8142526 两种方法: 1.直接在图片上写文字 String str = "PIC ...
- jquery-mobile之loading加载自定义
用jquery-mobile的时候,我们发现文档中loading是直接通过标签属性进行渲染,封装的函数必须通过点击按钮才能执行.而实际运用中,我们的加载开始和结束可能不需要点击,而是通过某个函数调用直 ...
- 十分钟学会mysql数据库操作
Part1:写在最前 MySQL安装的方式有三种: ①rpm包安装 ②二进制包安装 ③源码安装 这里我们推荐二进制包安装,无论从安装速度还是用于生产库安装环境来说,都是没问题的.现在生产库一般采用My ...
- IBM DB2 For Linux安装指南（转）
一.安装前准备工作: 1.对于Linux系统,需要安装以下软件包: 2.Linux内核设置: 编辑/etc/sysctl.conf文件,加入如下内容: 3.创建相应用户以及组: 官方文档给出必须创建三 ...
- lua 操作中文字符串之截取和长度竖排显示
前言 在游戏中,我们经常会遇到汉字的多行显示,比如名字竖行显示等.如下图: 为了实现上面的效果,lua实现分行是通过 \n 实现的,所以我们需要取出汉字,然后插入 \n 实现分行效果.还有一种就是 ...
- IOS UIView 属性clipsToBounds
当一个view上加了一个SubView 并且subview 的size超出了view的size那么默认超出部分也会显示出来,要想不显示出来设置 view的clipsToBounds属性设置成YES:即 ...