happy-scroll.css 1.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  1. .happy-scroll {
  2. width: 100%;
  3. height: 100%;
  4. overflow: hidden;
  5. position: relative;
  6. }
  7. .happy-scroll-strip--vertical {
  8. position: absolute;
  9. right: 0px;
  10. top:0;
  11. height: 100%;
  12. }
  13. .happy-scroll-strip--vertical .happy-scroll-bar {
  14. background-color: rgba(51,51,51,0.2);
  15. border-radius: 7px;
  16. width: 6px;
  17. height: 0;
  18. -webkit-transition: width 0.4s ease, height 0.6s ease;
  19. transition: width 0.4s ease, height 0.6s ease;
  20. }
  21. .happy-scroll-strip--horizontal {
  22. position: absolute;
  23. bottom: 0px;
  24. left:0;
  25. width: 100%;
  26. }
  27. .happy-scroll-strip--horizontal .happy-scroll-bar {
  28. background-color: rgba(51,51,51,0.2);
  29. border-radius: 7px;
  30. height: 6px;
  31. width: 0;
  32. -webkit-transition: height 0.4s ease, width 0.6s ease;
  33. transition: height 0.4s ease, width 0.6s ease;
  34. }
  35. /* 在webkit内核下将滚动条隐藏,Firefox下采用容器覆盖的机制 */
  36. .happy-scroll-container::-webkit-scrollbar {
  37. display: none;
  38. }
  39. .happy-scroll-container {
  40. overflow: auto;
  41. }
  42. .happy-scroll-container .happy-scroll-content{
  43. /* 解决横向滚动差 20px 的问题 */
  44. display: inline-block;
  45. }