javascript – 防止在后台滚动

前端之家收集整理的这篇文章主要介绍了javascript – 防止在后台滚动前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

  1. function openNav() {
  2. document.getElementById('UI').className = "open";
  3. }
  4. function closeNav() {
  5. document.getElementById('UI').className = "closed";
  6. }
  1. body {
  2. font-family: monospace;
  3. padding: 75px;
  4. word-wrap: break-word;
  5. }
  6. #UI {
  7. position: fixed;
  8. top: 0;
  9. left: 0;
  10. width: 100%;
  11. height: 100%;
  12. transition: all .5s;
  13. }
  14. #UI.closed {
  15. background-color: rgba(255,255,.0);
  16. }
  17. #UI.open {
  18. background-color: rgba(05,55,105,.75);
  19. }
  20. #UI button {
  21. font-size: 30;
  22. width: 50px;
  23. height: 50px;
  24. border: 0;
  25. outline: 0;
  26. color: white;
  27. background-color: blue;
  28. transition: all .5s;
  29. cursor: pointer;
  30. position: fixed;
  31. }
  32. #UI button:hover {
  33. background-color: white;
  34. color: blue;
  35. Box-shadow: 0px 0px 15px blue;
  36. }
  37. #openNavBtn {
  38. top: 5px;
  39. }
  40. #topBtn {
  41. top: 5px;
  42. right: 5px;
  43. }
  44. #nav {
  45. position: fixed;
  46. top: 0;
  47. width: 300px;
  48. height: 100%;
  49. background-color: blue;
  50. transition: all .5s;
  51. }
  52. #closeNavBtn {
  53. position: fixed;
  54. left: -50px;
  55. }
  56. #UI.closed #openNavBtn {
  57. left: 5px;
  58. }
  59. #UI.closed #topBtn {
  60. right: 5px;
  61. }
  62. #UI.closed #nav {
  63. left: -300px;
  64. Box-shadow: 0px 0px 15px black;
  65. }
  66. #UI.closed #closeNavBtn {
  67. left: -50px;
  68. }
  69. #UI.open #openNavBtn {
  70. left: -55px;
  71. }
  72. #UI.open #topBtn {
  73. right: -55px;
  74. }
  75. #UI.open #nav {
  76. left: 0;
  77. Box-shadow: 0px 0px 15px black;
  78. }
  79. #UI.open #closeNavBtn {
  80. left: 250px;
  81. }

使用当前代码,当导航打开时,正文滚动 – 我该如何防止这种情况?

附:请原谅我的聚类编码风格.如果有人对如何保持清洁有任何建议,请分享.

P.P.S.我已经问了整个问题,但它说我需要更多细节.将来我该怎样避免这种情况?

最佳答案
您可以使导航切换还添加删除正文上的类,并使用它来设置overflow:隐藏在body标签上,如果这是您要求的:

  1. function openNav() {
  2. document.getElementById('UI').className = "open";
  3. document.body.className = 'navopen';
  4. }
  5. function closeNav() {
  6. document.getElementById('UI').className = "closed";
  7. document.body.className = '';
  8. }
  1. body {
  2. font-family: monospace;
  3. padding: 75px;
  4. word-wrap: break-word;
  5. }
  6. body.navopen {
  7. overflow: hidden;
  8. }
  9. #UI {
  10. position: fixed;
  11. top: 0;
  12. left: 0;
  13. width: 100%;
  14. height: 100%;
  15. transition: all .5s;
  16. }
  17. #UI.closed {
  18. background-color: rgba(255,.75);
  19. }
  20. #UI button {
  21. font-size: 30;
  22. width: 50px;
  23. height: 50px;
  24. border: 0;
  25. outline: 0;
  26. color: white;
  27. background-color: blue;
  28. transition: all .5s;
  29. cursor: pointer;
  30. position: fixed;
  31. }
  32. #UI button:hover {
  33. background-color: white;
  34. color: blue;
  35. Box-shadow: 0px 0px 15px blue;
  36. }
  37. #openNavBtn {
  38. top: 5px;
  39. }
  40. #topBtn {
  41. top: 5px;
  42. right: 5px;
  43. }
  44. #nav {
  45. position: fixed;
  46. top: 0;
  47. width: 300px;
  48. height: 100%;
  49. background-color: blue;
  50. transition: all .5s;
  51. }
  52. #closeNavBtn {
  53. position: fixed;
  54. left: -50px;
  55. }
  56. #UI.closed #openNavBtn {
  57. left: 5px;
  58. }
  59. #UI.closed #topBtn {
  60. right: 5px;
  61. }
  62. #UI.closed #nav {
  63. left: -300px;
  64. Box-shadow: 0px 0px 15px black;
  65. }
  66. #UI.closed #closeNavBtn {
  67. left: -50px;
  68. }
  69. #UI.open #openNavBtn {
  70. left: -55px;
  71. }
  72. #UI.open #topBtn {
  73. right: -55px;
  74. }
  75. #UI.open #nav {
  76. left: 0;
  77. Box-shadow: 0px 0px 15px black;
  78. }
  79. #UI.open #closeNavBtn {
  80. left: 250px;
  81. }

猜你在找的JavaScript相关文章