likes
comments
collection
share

如何用CSS制作“滚动选择”表单控件前言 想用CSS制作一款“滚动选择”的表单控件, 功能如下所示: 上图的效果, 仅用

作者站长头像
站长
· 阅读数 43

前言

想用CSS制作一款“滚动选择”的表单控件, 功能如下所示:

如何用CSS制作“滚动选择”表单控件前言 想用CSS制作一款“滚动选择”的表单控件, 功能如下所示: 上图的效果, 仅用

上图的效果, 仅用HTML + CSS + 少量JS实现, 感兴趣的小伙伴们, 赶快动动小手, 和我一起开始制作吧~~

正文

创建容器及内部条目

首先我们使用section作为滚动的容器, 每一条是一个label, label里内嵌input和abbr(被标记的缩写)

<section class=scroll-container>
  <label class=scroll-items>Madrid <span>MAD</span><input type=radio name=items /></label>
  <label class=scroll-items>Malta <span>MLA</span><input type=radio name=items /></label>
  <label class=scroll-items>Manchester <span>MAN</span><input type=radio name=items /></label>
  <label class=scroll-items>Manilla <span>MNL</span><input type=radio name=items /></label>
  <label class=scroll-items>Marseille <span>MRS</span><input type=radio name=items /></label>
...
</section>

容器样式

.scroll-container {
  /* 大小 & 布局 */
  --itemHeight: 60px;
  --itemGap: 10px;
  --containerHeight: calc((var(--itemHeight) * 7) + (var(--itemGap) * 6));

  width: 400px; 
  height: var(--containerHeight);
  align-items: center;
  row-gap: var(--itemGap);
  border-radius: 4px;

  /* 绘制 */
  --topBit: calc((var(--containerHeight) - var(--itemHeight))/2);
  --footBit: calc((var(--containerHeight) + var(--itemHeight))/2);

  background: linear-gradient(
    rgb(254 251 240), 
    rgb(254 251 240) var(--topBit), 
    rgb(229 50 34 / .5) var(--topBit), 
    rgb(229 50 34 / .5) var(--footBit), 
    rgb(254 251 240) 
    var(--footBit));
  box-shadow: 0 0 10px #eee;
}
  • --itemHeight: 每个条目的高度
  • --itemGap: 每个条目之间的间隔
  • --containerHeight: 容器的高度, 其值 = 所有条目高度 + 所有条目之间的间隔, * 7表示我们最多只显示7个条目(奇数个条目可以带来良好的平衡效果, 即选中的条目位于容器的垂直中心).
  • --topBit和--footBit是颜色绘制点, 视觉上, 它们绘制在中间区域(在演示中为橙色), 来表示当前选定的项目.

我将在容器上声明flexbox, 将内容垂直排列

.scroll-container {
    display: flex;
    flex-direction: column;
}

滚动样式

通过前面, 可以得知容器在垂直方向滚动, 对此, 我们需要开启容器在垂直方向滚动的功能, 有一篇关于CSS滚动捕捉的文章, 感兴趣的同学可以查看详情.

.scroll-container {
  overflow-y: scroll;
  ...
}

接下来，我们使用 scroll-snap-style 属性，它可以告诉我们 .scroll-container 想要滚动停止在某个条目上 - 不是在条目附近，而是直接在它上面。

.scroll-container {
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  /* rest of styles */
}

现在看起来似乎可以了, 但存在一个小问题: 当有人将.scroll-container （沿 y 轴）滚动时，一旦到达边界，滚动就会停止，并且任何进一步的滚动操作都不会触发容器的滚动。

为了解决该问题, 我们需添加overscroll-behavior-y: none

.scroll-container {
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  overscroll-behavior-y: none
}

这只是一种防御性的 CSS 形式。

我们再给每一条添加scroll-snap-align: center样式, 该属性用于为 .scroll-container提供一个对齐点.

例如, 条目的中心与 .scroll-container的中心(也是垂直中心)对齐, 由于我们仅通过滚动选择条目, 因此还需要给条目添加pointer-events: none属性, 防止通过点击进行选择.

.scroll-items {
    scroll-snap-align: center;
    pointer-events: none;
}

每个条目选中后的效果为红色, 对此, 我们可以使用:has(:checked)属性

.scroll-items {
    scroll-snap-align: center;
    pointer-events: none;
    &:has(:checked) { /* if radio checked */
      background: rgb(229 50 34); 
    }
}

页面运行

现在页面的完整代码如下所示

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>“滚动选择”表单控件</title>
    <style>
      .scroll-container {
        /* sizing and layout */
        --itemHeight: 60px;
        --itemGap: 10px;
        --containerHeight: calc((var(--itemHeight) * 7) + (var(--itemGap) * 6));
        width: 400px;
        height: var(--containerHeight);
        display: flex;
        flex-direction: column;
        align-items: center;
        row-gap: var(--itemGap);
        border-radius: 4px;
        /* scrolling */
        overflow-y: scroll;
        scroll-snap-type: y mandatory;
        overscroll-behavior-y: none;
        /* paint */
        --topBit: calc((var(--containerHeight) - var(--itemHeight)) / 2);
        --footBit: calc((var(--containerHeight) + var(--itemHeight)) / 2);
        background: linear-gradient(
          rgb(254 251 240),
          rgb(254 251 240) var(--topBit),
          rgb(229 50 34 / 0.5) var(--topBit),
          rgb(229 50 34 / 0.5) var(--footBit),
          rgb(254 251 240) var(--footBit)
        );
        box-shadow: 0 0 10px #eee;

        /* items inside scroll container */
        .scroll-items {
          /* sizing and layout */
          width: 90%;
          flex: 0 0 var(--itemHeight);
          box-sizing: border-box;
          padding-inline: 20px;
          border-radius: inherit;
          &:first-of-type {
            margin-block-start: var(--topBit);
          }
          &:last-of-type {
            margin-block-end: var(--topBit);
          }
          /* paint and font */
          background: linear-gradient(to right, rgb(242 194 66), rgb(235 122 51));
          box-shadow: 0 0 4px rgb(235 122 51);
          font: 16pt / var(--itemHeight) 'poppins';
          color: white;

          scroll-snap-align: center;
          pointer-events: none;

          input {
            appearance: none;
          }
          span {
            /* contains airport code */
            float: right;
          }

          &:has(:checked) {
            /* if radio checked */
            background: rgb(229 50 34);
          }
        }
      }
      h1 {
        font-size: 18pt;
      }
      body {
        height: 100vh;
        display: grid;
        place-content: center;
        place-items: center;
        row-gap: 30px;
        margin: 0;
        font-family: 'crimson text';
        user-select: none;
        -moz-user-select: none;
        -webkit-user-select: none;
      }
    </style>
  </head>
  <body>
    <h1>Scroll to select</h1>
    <section class="scroll-container">
      <label class="scroll-items">Madrid <span>MAD</span><input type="radio" name="items" /></label>
      <label class="scroll-items">Malta <span>MLA</span><input type="radio" name="items" /></label>
      <label class="scroll-items">Manchester <span>MAN</span><input type="radio" name="items" /></label>
      <label class="scroll-items">Manilla <span>MNL</span><input type="radio" name="items" /></label>
      <label class="scroll-items">Marseille <span>MRS</span><input type="radio" name="items" /></label>
      <label class="scroll-items">Mauritius <span>MRU</span><input type="radio" name="items" /></label>
      <label class="scroll-items">Medford <span>MFR</span><input type="radio" name="items" /></label>
      <label class="scroll-items">Medina <span>MED</span><input type="radio" name="items" /></label>
      <label class="scroll-items">Melbourne <span>MEL</span><input type="radio" name="items" /></label>
      <label class="scroll-items">Memphis <span>MEM</span><input type="radio" name="items" /></label>
      <label class="scroll-items">Miami <span>MIA</span><input type="radio" name="items" /></label>
      <label class="scroll-items">Milan <span>MXP</span><input type="radio" name="items" /></label>
      <label class="scroll-items">Mildura <span>MQL</span><input type="radio" name="items" /></label>
      <label class="scroll-items">Milwaukee <span>MKE</span><input type="radio" name="items" /></label>
      <label class="scroll-items">Missoula <span>MSO</span><input type="radio" name="items" /></label>
      <label class="scroll-items">Moline <span>MLI</span><input type="radio" name="items" /></label>
      <label class="scroll-items">Monterey <span>MRY</span><input type="radio" name="items" /></label>
      <label class="scroll-items">Montpellier <span>MPL</span><input type="radio" name="items" /></label>
      <label class="scroll-items">Montrose <span>MTJ</span><input type="radio" name="items" /></label>
      <label class="scroll-items">Mulhouse <span>MLH</span><input type="radio" name="items" /></label>
      <label class="scroll-items">Munich <span>MUC</span><input type="radio" name="items" /></label>
      <label class="scroll-items">Muscat <span>MCT</span><input type="radio" name="items" /></label>
      <label class="scroll-items">Myrtle Beach <span>MYR</span><input type="radio" name="items" /></label>
    </section>
  </body>
</html>

发现一个小问题: 没有预期的选中效果

这是因为任何滚动到视图内, 与容器垂直中心点相交的条目, 需要手动将checked设置为true . 为了解决该问题, 我们需要JS来实现.

    let observer = new IntersectionObserver(
      entries => {
        entries.forEach(entry => {
          with (entry) if (isIntersecting) target.children[1].checked = true
        })
      },
      { root: document.querySelector(`.scroll-container`), rootMargin: `-51% 0px -49% 0px` }
    )
    document.querySelectorAll(`.scroll-items`).forEach(item => observer.observe(item))

IntersectionObserver 用于监视（或“观察”）一个元素是否穿过（或“相交”）另一个元素。

在本例中，我们观察 .scroll-container何时与.scroll-items中的某条相交。

为此, 我们建立了观察边界 rootMargin:"-51% 0px -49% 0px"

发生这种穿过（或“相交”)时, 会执行一个回调函数, 我们可以在该函数内, 将当前条目设置为选中状态, 即checked为true.

在我们的示例中, 我们将位于.scroll-container中间的.scroll-items条目, 设置为target.children[1].checked = true

尾声

再次运行页面, 发现效果正如预期那般, 非常完美~~ 感兴趣的小伙伴们欢迎在下方留言、点赞或关注哦~

转载自:https://juejin.cn/post/7424191151923920932
评论
请登录