mescroll.css 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270
  1. /* mescroll
  2. * version 1.4.2
  3. * 2019-08-01 wenju
  4. * http://www.mescroll.com
  5. *
  6. * 温馨提示: mescroll唯一的全局样式: html,body{height:100%},用于固定body的高度满屏; 如果影响到您原本的项目样式,可自行删除
  7. *
  8. * ----- mescroll的html结构解析 ----
  9. *
  10. <body>
  11. <div id="mescroll" class="mescroll">
  12. <div>
  13. //下拉刷新区域 ( mescroll初始化之后自动创建 )
  14. <div class="mescroll-downwarp">
  15. <div class="downwarp-content">
  16. <p class="downwarp-progress"></p> <p class="downwarp-tip">下拉刷新 </p>
  17. </div>
  18. </div>
  19. //界面的具体内容
  20. //<div>界面内容</div>
  21. //数据列表..
  22. //<ul id="dataList" class="data-list">
  23. // <li>数据列表</li>
  24. //空布局 ( 列表无任何数据时, 且配置了warpId时, 会自动创建显示 )
  25. <div class="mescroll-empty">
  26. <img class="empty-icon" src="../img/mescroll-empty.png"/>
  27. <p class="empty-tip">暂无相关数据~</p>
  28. <p class="empty-btn">去逛逛 ></p>
  29. </div>
  30. //</ul>
  31. //上拉加载区域 ( mescroll初始化之后自动创建 )
  32. <div class="mescroll-upwarp">
  33. //加载中..
  34. <p class="upwarp-progress mescroll-rotate"></p><p class="upwarp-tip">加载中..</p>
  35. //无数据
  36. <p class="upwarp-nodata">-- END --</p>
  37. </div>
  38. </div>
  39. </div>
  40. //回到顶部按钮 ( 列表滚动到配置的距离时, 且配置了warpId时, 会自动创建显示, 注意是添加在body中的 )
  41. <img class="mescroll-totop" src="../img/mescroll-totop.png"/>
  42. </body>
  43. *
  44. */
  45. /*使iOS列表滑动流畅*/
  46. body {
  47. -webkit-overflow-scrolling: touch;
  48. }
  49. /*下拉刷新和上拉加载的滑动区域*/
  50. .message-wrap .message-box .mescroll {
  51. width: 635px;
  52. height: 420px;
  53. overflow-y: auto;
  54. z-index: 1;
  55. }
  56. /*启用硬件加速:使动画渲染流畅,解决部分手机闪白屏问题,在下拉刷新和上拉加载触发时启用,结束后移除,避免滥用导致其他兼容性问题*/
  57. .mescroll-hardware {
  58. -webkit-transform: translateZ(0);
  59. -webkit-transform-style: preserve-3d;
  60. -webkit-backface-visibility: hidden;
  61. -webkit-perspective: 1000;
  62. }
  63. /*下拉刷新区域*/
  64. .mescroll-downwarp {
  65. position: relative;
  66. width: 100%;
  67. height: 0;
  68. overflow: hidden;
  69. text-align: center;
  70. }
  71. /*下拉刷新--高度重置的过渡动画*/
  72. .mescroll-downwarp-reset {
  73. -webkit-transition: height 300ms;
  74. transition: height 300ms;
  75. }
  76. /*下拉刷新--内容区,定位于区域底部*/
  77. .mescroll-downwarp .downwarp-content {
  78. position: absolute;
  79. left: 0;
  80. bottom: 0;
  81. width: 100%;
  82. min-height: 30px;
  83. padding: 10px 0;
  84. }
  85. /*上拉加载区域*/
  86. .mescroll-upwarp {
  87. min-height: 0px;
  88. padding: 0px 0;
  89. text-align: center;
  90. visibility: hidden;/*代替display: none,列表快速滑动到底部能及时显示上拉加载的区域*/
  91. }
  92. /*下拉刷新,上拉加载--提示文本*/
  93. .mescroll-downwarp .downwarp-tip,
  94. .mescroll-upwarp .upwarp-tip,
  95. .mescroll-upwarp .upwarp-nodata {
  96. display: inline-block;
  97. font-size: 12px;
  98. color: gray;
  99. vertical-align: middle;
  100. }
  101. .mescroll-downwarp .downwarp-tip,
  102. .mescroll-upwarp .upwarp-tip{
  103. margin-left: 8px;
  104. }
  105. /*下拉刷新,上拉加载--旋转进度条*/
  106. .mescroll-downwarp .downwarp-progress,
  107. .mescroll-upwarp .upwarp-progress {
  108. display: inline-block;
  109. width: 16px;
  110. height: 16px;
  111. border-radius: 50%;
  112. border: 1px solid gray;
  113. border-bottom-color: transparent;
  114. vertical-align: middle;
  115. }
  116. /*旋转动画*/
  117. .mescroll-rotate {
  118. -webkit-animation: mescrollRotate 0.6s linear infinite;
  119. animation: mescrollRotate 0.6s linear infinite;
  120. }
  121. @-webkit-keyframes mescrollRotate {
  122. 0% {
  123. -webkit-transform: rotate(0deg);
  124. }
  125. 100% {
  126. -webkit-transform: rotate(360deg);
  127. }
  128. }
  129. @keyframes mescrollRotate {
  130. 0% {
  131. transform: rotate(0deg);
  132. }
  133. 100% {
  134. transform: rotate(360deg);
  135. }
  136. }
  137. /*无任何数据的空布局*/
  138. .mescroll-empty {
  139. width: 100%;
  140. padding-top: 20px;
  141. text-align: center;
  142. }
  143. .mescroll-empty .empty-icon {
  144. width: 45%;
  145. }
  146. .mescroll-empty .empty-tip {
  147. margin-top: 6px;
  148. font-size: 14px;
  149. color: gray;
  150. }
  151. .mescroll-empty .empty-btn {
  152. max-width: 50%;
  153. margin: 20px auto;
  154. padding: 10px;
  155. border: 1px solid #65AADD;
  156. border-radius: 6px;
  157. background-color: white;
  158. color: #65AADD;
  159. }
  160. .mescroll-empty .empty-btn:active {
  161. opacity: .75;
  162. }
  163. /*回到顶部的按钮*/
  164. .mescroll-totop {
  165. z-index: 9990;
  166. position: fixed;
  167. right: 10px;
  168. bottom: 30px;
  169. width: 36px;
  170. height: 36px;
  171. border-radius: 50%;
  172. opacity: 0;
  173. }
  174. /*显示动画--淡入*/
  175. .mescroll-lazy-in,
  176. .mescroll-fade-in {
  177. -webkit-animation: mescrollFadeIn .5s linear forwards;
  178. animation: mescrollFadeIn .5s linear forwards;
  179. }
  180. @-webkit-keyframes mescrollFadeIn {
  181. 0% {
  182. opacity: 0;
  183. }
  184. 100% {
  185. opacity: 1;
  186. }
  187. }
  188. @keyframes mescrollFadeIn {
  189. 0% {
  190. opacity: 0;
  191. }
  192. 100% {
  193. opacity: 1;
  194. }
  195. }
  196. /*隐藏动画--淡出*/
  197. .mescroll-fade-out {
  198. pointer-events: none;
  199. -webkit-animation: mescrollFadeOut .5s linear forwards;
  200. animation: mescrollFadeOut .5s linear forwards;
  201. }
  202. @-webkit-keyframes mescrollFadeOut {
  203. 0% {
  204. opacity: 1;
  205. }
  206. 100% {
  207. opacity: 0;
  208. }
  209. }
  210. @keyframes mescrollFadeOut {
  211. 0% {
  212. opacity: 1;
  213. }
  214. 100% {
  215. opacity: 0;
  216. }
  217. }
  218. /*滚动条轨道背景(默认在PC端设置)*/
  219. .mescroll-bar::-webkit-scrollbar-track {
  220. background-color: transparent;
  221. }
  222. /*滚动条轨道宽度 (默认在PC端设置)*/
  223. .mescroll-bar::-webkit-scrollbar {
  224. width: 6px;
  225. }
  226. /*滚动条游标 (默认在PC端设置)*/
  227. .mescroll-bar::-webkit-scrollbar-thumb {
  228. border-radius: 6px;
  229. background-color: #ccc;
  230. }
  231. /*滚动条游标鼠标经过的颜色变化 (默认在PC端设置)*/
  232. .mescroll-bar::-webkit-scrollbar-thumb:hover {
  233. background-color: #aaa;
  234. }