Implementation of: Panel only and content only scroll (with fixed header)

Implementation of: Panel only and content only scroll (with fixed header)

I've implemented panel only and content only scroll, tested on android & iOS (Chrome & Safari browsers)

optimized for reveal and push effects

  2. body {
  3.     overflow: hidden;
  4. }

  7. .ui-panel {
  8.     top: -1px;
  9. }

  11.     .ui-panel .ui-panel-inner,
  12.     .ui-panel-wrapper .ui-content {
  13.         overflow-y: auto;
  14.         position: absolute;
  15.         left: 0;
  16.         right: 0;
  17.         bottom: 0;
  18.         top: 1px;
  19.         -webkit-overflow-scrolling: touch;
  20.     }

  22. .ui-panel-dismiss-open,
  23. .ui-panel-page-content-open .ui-content {
  24.     overflow-y: hidden;
  25. }

  27. .ui-panel-wrapper {
  28.     height: 100%;
  29.     top: -1px;
  30.     margin-bottom: -2px;
  31. }

  33. .ui-page {
  34.     height: 100%;
  35.     -moz-box-sizing: border-box;
  36.     -webkit-box-sizing: border-box;
  37.     box-sizing: border-box;
  38. }
Also you can use reveal effect shadow on the page with fixed toolbar without visual bugs.
  2. .ui-panel-display-reveal {
  3.     -webkit-box-shadow: none;
  4.     -moz-box-shadow: none;
  5.     box-shadow: none;
  6. }

  8. .ui-page .ui-panel-page-content-position-left {
  9.     -webkit-box-shadow: -5px 0px 5px rgba(0,0,0,.15);
  10.     -moz-box-shadow: -5px 0px 5px rgba(0,0,0,.15);
  11.     box-shadow: -5px 0px 5px rgba(0,0,0,.15);
  12. }