html 溢出滚动而不隐藏它的溢出内容

djp7away  于 2023-11-15  发布在  其他
关注(0)|答案(5)|浏览(214)

我试图创建一个“滑块”，用户可以水平滚动到特定的“滑块项目”，我试图用纯css创建它，然而，我似乎不能让它正常工作。

开始：

结束：

好吧，让我解释一下图片。在'Window'中的所有内容都是可见的。这也意味着无序列表的溢出。我想要的是让用户能够在容器中水平滚动以移动无序列表。然而，我不能在'容器'上使用overflow: hidden或overflow: scroll，因为它会隐藏所有溢出的内容，这是我不想要的。
我如何才能实现这一点，或者它甚至可以用纯CSS实现？
我的当前代码：https://jsfiddle.net/f0exzxkw/2/

Html

5条答案

按热度按时间
6rvt4ljy

6rvt4ljy1#

我开始使用SwiperJs作为@Karl提到（演示：https://swiper-demo-13-centered-1j4bnx.stackblitz.io/），但在那之后我开始尝试没有它。有很多技巧，其中很多可以不同和改进。但是，要正确对齐滚动条，你必须使用自定义的。主要思想是在.scroll-container上设置一个负边距，使用CSS变量来计算元素之间的空间。

  1. :root {
  2.     --WINDOW-X-SPACE: 20px;
  3.     --CONTAINER-X-SPACE: 30px;
  4. }
  6. * {
  7.     box-sizing: border-box;
  8. }
  9. html, body {
  10.     height: 100vh;
  11. }
  12. body {
  13.     background: teal;
  14.     margin: 0;
  15.     padding: 20px var(--WINDOW-X-SPACE);
  16.     overflow-x: hidden;
  17. }
  18. main {
  19.     padding: 10px var(--CONTAINER-X-SPACE);
  20.     background: purple;
  21. }
  22. .scroll-container {
  23.     height: 200px;
  24.     margin: 0 calc(-1 * calc(var(--WINDOW-X-SPACE) + var(--CONTAINER-X-SPACE)));
  25.     padding: 0 var(--WINDOW-X-SPACE);
  26.     display: flex;
  27.     overflow: auto;
  28. }
  29. .scroll-container::-webkit-scrollbar {
  30.     all: unset;
  31. }
  32.  
  33. .scroll-container::-webkit-scrollbar-track {
  34.     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
  35.     border-radius: 10px;
  36.     margin: 0 var(--WINDOW-X-SPACE);
  37. }
  38.  
  39. .scroll-container::-webkit-scrollbar-thumb {
  40.     border-radius: 10px;
  41.     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
  42.     background-color: white;
  43. }
  44. .list-wrapper {
  45.     background: orange;
  46.     width: fit-content;
  47.     height: 100%;
  48.     display: flex;
  49.     margin: 0;
  50.     padding: 0;
  51.     padding-top: 40px;
  52.     position: relative;
  53. }
  54. .list-wrapper:before {
  55.     content: "Unordened list";
  56.     display: block;
  57.     position: absolute;
  58.     left: 15px;
  59.     top: 12px;
  60. }
  61. .list-item {
  62.     text-align: center;
  63.     font-size: 18px;
  64.     background: rgba(255, 255, 255, .5);
  65.     border: solid 1px orange;
  66.     width: 100px;
  67.     flex-shrink: 0;
  68.     height: 100%;
  70.     /* Center slide text vertically */
  71.     display: flex;
  72.     justify-content: center;
  73.     align-items: center;
  74. }
  76. .fix-offset {
  77.     width: var(--WINDOW-X-SPACE);
  78.     flex-shrink: 0;
  79. }

个字符
标签：https://codepen.io/Alynva/full/gOPaGVX

展开查看全部
赞(0）分享  回复(0）举报  2023-11-15
erhoui1w

erhoui1w2#

我们的想法是在一个固定的元素上设置背景，并将列表放在它的顶部。

Jsfiddle Example

  1. body {
  2.   background: teal;
  3.   margin: 0;
  4. }
  5. .background {
  6.   background: purple;
  7.   width: 80vw;
  8.   height: 80vh;
  9.   position: fixed;
  10.   left: 10vw;
  11.   top: 10vh;
  12. }
  13. .scrollable {
  14.   list-style-type: none;
  15.   position: relative;
  16.   display: flex;
  17.   padding: 0;
  18.   margin: 20vh 0 0 10vw;
  19.   height: 60vh;
  20. }
  21. .scrollable li {
  22.   padding: 10px;
  23.   background: orange;
  24.   height: 100%;
  25.   flex: 0 0 50vw;
  26.   border: 1px solid darkorange;
  27.   box-sizing: border-box;
  28. }

个字符

展开查看全部
赞(0）分享  回复(0）举报  2023-11-15
tkclm6bt

tkclm6bt3#

试试这个（调整特定的值/单位以适应）：

  1. html, body {
  2.   margin: 0;
  3.   padding: 0;
  4.   background: #12969D;
  5. }
  7. .container {
  8.   height: 90vh;
  9.   width: 90vw;
  10.   padding: 40px 0;
  11.   box-sizing: border-box;
  12.   border: 1px solid black;
  13.   background: #6B00BE;
  14.   margin: 5vh auto;
  15. }
  17. ul {
  18.   height: 100%;
  19.   width: calc(100% + 75px);
  20.   padding: 0;
  21.   background: #FFBD37;
  22.   list-style-type: none;
  23.   box-sizing: border-box;
  24.   overflow-x: scroll;
  25.   overflow-y: hidden;
  26.   white-space:nowrap;
  27. }
  29. li {
  30.   padding: 10px;
  31.   display: inline-block;
  32.   background: #FFD787;
  33.   height: 100%;
  34.   width: 50vw;
  35.   border: 1px solid black;
  36. }

个字符

展开查看全部
赞(0）分享  回复(0）举报  2023-11-15
3qpi33ja

3qpi33ja4#

请试试这个：
联系我们

  1. <div id="project-slider">
  2.    <div class="container">
  3.       <ul class="items-holder">
  4.          <li class="item" style="background: blue;"></li>
  5.          <li class="item" style="background: red;"></li>
  6.          <li class="item" style="background: green;"></li>
  7.       </div>
  8.    </div>
  9. </div>
  11. <div>
  12.   <p>
  13.     Just to show that currently the window is scrolling instead of the container.
  14.   </p>
  15. </div>

字符串
中文（简体）

  1. html, body {
  2.   margin: 0;
  3.   padding: 0;
  4.   background: #12969D;
  5. }
  7. .container {
  8.   height: 90vh;
  9.   width: 90vw;
  10.   padding: 40px 0;
  11.   box-sizing: border-box;
  12.   border: 1px solid black;
  13.   background: #6B00BE;
  14.   margin: 5vh auto;
  15. }
  17. ul {
  18.   height: 100%;
  19.   width: calc(100% + 75px);
  20.   padding: 0;
  21.   background: #FFBD37;
  22.   list-style-type: none;
  23.   box-sizing: border-box;
  24.   overflow-x: scroll;
  25.   overflow-y: hidden;
  26.   white-space:nowrap;
  27. }
  29. li {
  30.   padding: 10px;
  31.   display: inline-block;
  32.   background: #FFD787;
  33.   height: 100%;
  34.   width: 50vw;
  35.   border: 1px solid black;
  36. }

型
DEMO HERE

展开查看全部
赞(0）分享  回复(0）举报  2023-11-15
gxwragnw

gxwragnw5#

  1. $container-width: 1160px;
  2. $responsive-padding: 16px;
  4. * {
  5.   margin: 0;
  6.   padding: 0;
  7.   box-sizing: border-box;
  8. }
  10. .container {
  11.   max-width: $container-width;
  12.   margin: 0 auto;
  14.   padding: 0 $responsive-padding;
  15.   box-sizing: content-box;
  16. }
  18. .slider {
  19.   background: rgb(210, 208, 255);
  20.   padding: 80px 0;
  21.   min-height: 100vh;
  22.   
  24.   &__track {
  25.     margin-top: 30px;
  26.     display: flex;
  27.     gap: 20px;
  28.     overflow: scroll;
  29.     padding: 10px 0;
  31.     /* Hide scrollbar for IE, Edge and Firefox */
  32.     -ms-overflow-style: none; /* IE and Edge */
  33.     scrollbar-width: none;
  34.   }
  36.   /* Hide scrollbar for Chrome, Safari and Opera */
  37.   &__track::-webkit-scrollbar {
  38.     display: none;
  39.   }
  41.   &__item {
  42.     min-width: 600px;
  43.     min-height: 180px;
  44.     background: rgb(255, 255, 255);
  45.     border-radius: 20px;
  47.     /* CORE LOGIC */
  48.     &:first-child {
  49.       margin-left: calc((100vw - $container-width) / 2);
  50.     }
  51.     &:last-child {
  52.       margin-right: calc((100vw - $container-width) / 2);
  53.     }
  54.   }
  55. }
  57. /* CORE LOGIC (responsive) @optional */
  58. @media (max-width: calc($container-width + $responsive-padding)) {
  59.   .slider {
  60.     &__item {
  61.       &:first-child {
  62.         margin-left: $responsive-padding;
  63.       }
  64.       &:last-child {
  65.         margin-right: $responsive-padding;
  66.       }
  67.     }
  68.   }
  69. }

个字符

展开查看全部
赞(0）分享  回复(0）举报  2023-11-15
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com