gpt4 book ai didi

溢出/滚动指示器的纯 CSS 解决方案

转载 作者:行者123 更新时间:2023-12-03 23:18:10 24 4
gpt4 key购买 nike

我只用 CSS 完成了一些滚动指示器。这几乎适用于任何地方并且很棒。唯一的问题是,如果框没有溢出(第一个框),则框的内容不会向左对齐。任何想法如何做到这一点?另外:随意使用此代码:)

html {
background: #FFF;
}

.scrollbox ul {
white-space: nowrap;
-webkit-box-flex: 1;
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
margin-left: -4rem;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
list-style-type: none;
}

.scrollbox {
outline: 1px dotted black;
position: relative;
z-index: 1;
overflow-x: auto;
overflow-y: hidden;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
word-wrap: nowrap;
max-width: 200px;
margin: 50px auto;
background: #FFF no-repeat;
background-image:
-webkit-radial-gradient(0 50%, farthest-side, rgba(0,0,0,0.2), rgba(0,0,0,0)),
-webkit-radial-gradient(100% 50%, farthest-side, rgba(0,0,0,0.2), rgba(0,0,0,0));
background-image:
-o-radial-gradient(0 50%, farthest-side, rgba(0,0,0,0.2), rgba(0,0,0,0)),
-o-radial-gradient(100% 50%, farthest-side, rgba(0,0,0,0.2), rgba(0,0,0,0));
background-image:
radial-gradient(farthest-side at 0 50%, rgba(0,0,0,0.2), rgba(0,0,0,0)),
radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,0.2), rgba(0,0,0,0));
background-position: 0 0, 100% 0;
background-size: 1rem 100%;
}

.scrollbox::before,
.scrollbox::after {
content: '';
position: relative;
z-index: -1;
display: block;
width: 2rem;
margin: 0;
-webkit-box-flex: 1;
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
}

.scrollbox::before {
background: -webkit-gradient(linear,left top, right top,from(#FFF),color-stop(50%, #FFF),to(rgba(255,255,255,0)));
background: -webkit-linear-gradient(left,#FFF,#FFF 50%,rgba(255,255,255,0));
background: -o-linear-gradient(left,#FFF,#FFF 50%,rgba(255,255,255,0));
background: linear-gradient(to right,#FFF,#FFF 50%,rgba(255,255,255,0));
}

.scrollbox::after {
background: -webkit-gradient(linear,left top, right top,from(rgba(255,255,255,0)),color-stop(50%, #FFF),to(#FFF));
background: -webkit-linear-gradient(left,rgba(255,255,255,0),#FFF 50%,#FFF);
background: -o-linear-gradient(left,rgba(255,255,255,0),#FFF 50%,#FFF);
background: linear-gradient(to right,rgba(255,255,255,0),#FFF 50%,#FFF);
}
<div class="scrollbox">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>


<div class="scrollbox">
<ul>
<li>Ah! Scroll right!</li>
<li>2 Lorem Ipsum</li>
<li>3 Lorem Ipsum</li>
<li>4 Lorem Ipsum</li>
<li>5 Lorem Ipsum</li>
<li>6 Lorem Ipsum</li>
<li>7 Lorem Ipsum</li>
<li>8 Lorem Ipsum</li>
<li>9 Lorem Ipsum</li>
<li>1 Lorem Ipsum0</li>
<li>1 Lorem Ipsum</li>
<li>2 Lorem Ipsum</li>
<li>3 Lorem Ipsum</li>
<li>4 Lorem Ipsum</li>
<li>5 Lorem Ipsum</li>
<li>6 Lorem Ipsum</li>
<li>7 Lorem Ipsum</li>
<li>8 Lorem Ipsum</li>
<li>9 Lorem Ipsum</li>
<li>1 Lorem Ipsum0</li>
<li>1 Lorem Ipsum</li>
<li>2 Lorem Ipsum</li>
<li>3 Lorem Ipsum</li>
<li>4 Lorem Ipsum</li>
<li>5 Lorem Ipsum</li>
<li>6 Lorem Ipsum</li>
<li>7 Lorem Ipsum</li>
<li>8 Lorem Ipsum</li>
<li>The end!</li>
<li>No shadow there.</li>
</ul>
</div>

最佳答案

这对我有用:

  • width: 2rem;min-width: 2rem;
  • 添加 max-width: 2rem;.scrollbox::before

  • 我只在 Chrome(macOS 和 Andriod)上看过它。

    html {
    background: #FFF;
    }

    .scrollbox ul {
    white-space: nowrap;
    -webkit-box-flex: 1;
    -webkit-flex: 1 0 auto;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
    margin-left: -4rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    list-style-type: none;
    }

    .scrollbox {
    outline: 1px dotted black;
    position: relative;
    z-index: 1;
    overflow-x: auto;
    overflow-y: hidden;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    word-wrap: nowrap;
    max-width: 200px;
    margin: 50px auto;
    background: #FFF no-repeat;
    background-image:
    -webkit-radial-gradient(0 50%, farthest-side, rgba(0,0,0,0.2), rgba(0,0,0,0)),
    -webkit-radial-gradient(100% 50%, farthest-side, rgba(0,0,0,0.2), rgba(0,0,0,0));
    background-image:
    -o-radial-gradient(0 50%, farthest-side, rgba(0,0,0,0.2), rgba(0,0,0,0)),
    -o-radial-gradient(100% 50%, farthest-side, rgba(0,0,0,0.2), rgba(0,0,0,0));
    background-image:
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,0.2), rgba(0,0,0,0)),
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,0.2), rgba(0,0,0,0));
    background-position: 0 0, 100% 0;
    background-size: 1rem 100%;
    }

    .scrollbox::before,
    .scrollbox::after {
    content: '';
    position: relative;
    z-index: -1;
    display: block;
    min-width: 2rem;
    margin: 0;
    -webkit-box-flex: 1;
    -webkit-flex: 1 0 auto;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
    }

    .scrollbox::before {
    max-width: 2rem;
    background: -webkit-gradient(linear,left top, right top,from(#FFF),color-stop(50%, #FFF),to(rgba(255,255,255,0)));
    background: -webkit-linear-gradient(left,#FFF,#FFF 50%,rgba(255,255,255,0));
    background: -o-linear-gradient(left,#FFF,#FFF 50%,rgba(255,255,255,0));
    background: linear-gradient(to right,#FFF,#FFF 50%,rgba(255,255,255,0));
    }

    .scrollbox::after {
    background: -webkit-gradient(linear,left top, right top,from(rgba(255,255,255,0)),color-stop(50%, #FFF),to(#FFF));
    background: -webkit-linear-gradient(left,rgba(255,255,255,0),#FFF 50%,#FFF);
    background: -o-linear-gradient(left,rgba(255,255,255,0),#FFF 50%,#FFF);
    background: linear-gradient(to right,rgba(255,255,255,0),#FFF 50%,#FFF);
    }
    <div class="scrollbox">
    <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    </ul>
    </div>


    <div class="scrollbox">
    <ul>
    <li>Ah! Scroll right!</li>
    <li>2 Lorem Ipsum</li>
    <li>3 Lorem Ipsum</li>
    <li>4 Lorem Ipsum</li>
    <li>5 Lorem Ipsum</li>
    <li>6 Lorem Ipsum</li>
    <li>7 Lorem Ipsum</li>
    <li>8 Lorem Ipsum</li>
    <li>9 Lorem Ipsum</li>
    <li>1 Lorem Ipsum0</li>
    <li>1 Lorem Ipsum</li>
    <li>2 Lorem Ipsum</li>
    <li>3 Lorem Ipsum</li>
    <li>4 Lorem Ipsum</li>
    <li>5 Lorem Ipsum</li>
    <li>6 Lorem Ipsum</li>
    <li>7 Lorem Ipsum</li>
    <li>8 Lorem Ipsum</li>
    <li>9 Lorem Ipsum</li>
    <li>1 Lorem Ipsum0</li>
    <li>1 Lorem Ipsum</li>
    <li>2 Lorem Ipsum</li>
    <li>3 Lorem Ipsum</li>
    <li>4 Lorem Ipsum</li>
    <li>5 Lorem Ipsum</li>
    <li>6 Lorem Ipsum</li>
    <li>7 Lorem Ipsum</li>
    <li>8 Lorem Ipsum</li>
    <li>The end!</li>
    <li>No shadow there.</li>
    </ul>
    </div>

    关于溢出/滚动指示器的纯 CSS 解决方案,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45105611/

    24 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com