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

时间：2017-07-14 14:36:27

标签： css css3

我只用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>

2 个答案:

答案 0 :(得分：1)

这对我有用：

  • 将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>

答案 1 :(得分：0)

在padding-left: 0中设置.scrollbox ul - 默认情况下填充

相关问题
最新问题