javascript - 日期选择器的缩放显示

Question

在我的 div scroll-parent 中间，您可能会看到边框。

.scroll-parent{
  position: relative;
  width: 100px;
  height: 200px;
  border: 1px solid #aaa;
  overflow: hidden;
}
.scroll-child {
  height: 100%;
  margin-right: -50px; /* maximum width of scrollbar */
  padding-right: 50px; /* maximum width of scrollbar */
  overflow-y: scroll;
}
.scroll-parent::before {
  content: "";
  top: 50%;
  position: absolute;
  margin-top: -15px;
  height: 32px;
  z-index: -1;
  left: 0;
  right: 0;
  box-sizing: border-box;
  padding-top: 6px;
  text-align: left;
  border-top: 1px solid #e4e7ed;
  border-bottom: 1px solid #e4e7ed;
}

ul {
  list-style: none;
}
ul::before,
ul::after {
  content: "";
  display: block;
  width: 100%;
  height: 80px;
}

<div class="scroll-parent">
  <div class="scroll-child">
    <ul class="datepicker" id="datepicker">
      <li class="datepicker-nr">1</li>
      <li class="datepicker-nr">2</li>
      <li class="datepicker-nr">3</li>
      <li class="datepicker-nr">4</li>
      <li class="datepicker-nr">5</li>
      <li class="datepicker-nr">6</li>
      <li class="datepicker-nr">7</li>
      <li class="datepicker-nr">8</li>
      <li class="datepicker-nr">9</li>
      <li class="datepicker-nr">10</li>
      <li class="datepicker-nr">11</li>
      <li class="datepicker-nr">12</li>
      <li class="datepicker-nr">13</li>
      <li class="datepicker-nr">14</li>
      <li class="datepicker-nr">15</li>
      <li class="datepicker-nr">16</li>
      <li class="datepicker-nr">17</li>
      <li class="datepicker-nr">18</li>
      <li class="datepicker-nr">19</li>
      <li class="datepicker-nr">20</li>
      <li class="datepicker-nr">21</li>
      <li class="datepicker-nr">22</li>
      <li class="datepicker-nr">23</li>
      <li class="datepicker-nr">24</li>
    </ul>
  </div>
</div>

每当用户滚动时，中间那个框内的内容应该获得更大的字体大小。我该怎么做？

jsfiddle

Answer 1

使用这个 Jquery 插件:

iOS 7 风格的 jQuery 3D 动画值选择器 - Drumjs

https://www.jqueryscript.net/form/iOS-7-Style-jQuery-3D-Animated-Value-Selector-Drumjs.html