< Сильный > [ Предпосылка ]

Я пытаюсь сделать список номеров, чтобы пользователь мог прокрутить его. Предполагается, что выбранный номер привязывается к center контейнера. После того, как число было выбрано, его следует увеличить и изменить цвет.


< Сильный > [ Проблемы ]

  • Как я могу привязать первые или последние элементы к центру контейнера?
  • Есть ли способ определения числа с помощью CSS или JavaScript? привязать к центру, а затем назначить класс selected?
  • Не полагайтесь на какие-либо плагины.
* {
  box-sizing: border-box;
  font-family: Roboto, sans-serif;
}

.container {
  display: flex;
  flex-direction: row;
  width: 10rem;
  height: 22rem;
  border-radius: 3rem;
  border: solid 0.2rem #b2b2c2;
  background-color: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scrollport {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  width: 9.4rem;
  height: 22rem;
  overflow: auto;
  scroll-snap-type: y mandatory;
}

.cell {
  display: block;
  scroll-snap-align: center;
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 33.3%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #e9e9f2;
  font-size: 2.4rem;
}

.selected {
  font-size: 3rem;
  font-weight: bold;
  color: #0073e6;
}
<div class="container">
  <div class="scrollport">
    <div class="cell">09</div>
    <div class="cell selected">10</div>
    <div class="cell">11</div>
    <div class="cell">12</div>
    <div class="cell">13</div>
    <div class="cell">14</div>
    <div class="cell">15</div>
    <div class="cell">16</div>
  </div>
</div>

[Ожидаемый результат]

enter image description here

0
Penny Liu 29 Май 2019 в 11:13

2 ответа

Лучший ответ

Добавьте псевдоэлементы в .scrollport и стилизуйте их как .cell

.scrollport:before,
.scrollport:after {
  content: '';
}
.scrollport:before,
.scrollport:after,
.cell {
  /* ... */
}

Также я создал функцию JS, которая использует Дэвида Уолша функция debounce для имитации события прокрутки. Затем я проверяю для каждого cell, находится ли его центр вокруг центра scrollport, и соответственно устанавливаю классы

"use strict";
console.clear()

{
  const selector = 'scrollport'
  const selected = 'selected'
  const scrollports = document.getElementsByClassName(selector)

  for (const scrollport of scrollports) {
    scrollport.addEventListener('scroll', debounce(check, 250) /* simulate scrollend event */ )
  }

  function check(e) {
    // uses native elementFromPoint for better performance
    const rect = e.target.getBoundingClientRect();
    const centerCell = document.elementFromPoint(rect.left + e.target.offsetWidth / 2, rect.top + e.target.offsetHeight / 2)
    for (const cell of e.target.getElementsByClassName(selected)) {
      cell.classList.remove(selected)
    }
    centerCell.classList.add(selected)
    
    // Old version for backward compatibility
    // const rect = e.target.getBoundingClientRect();
    // for (const cell of e.target.children) {
    //   const cellRect = cell.getBoundingClientRect();
    //   const bounds = [rect.height/2 - cellRect.height/2, rect.height/2 + cellRect.height/2];
    //   const centerScrollOffset = cellRect.top - rect.top + cell.offsetHeight / 2
    //   if (bounds[0] < centerScrollOffset && centerScrollOffset < bounds[1]) {
    //     cell.classList.add(selected)
    //   } else {
    //     cell.classList.remove(selected)
    //   }
    // }
  }
}
// From: https://davidwalsh.name/javascript-debounce-function
// Returns a function, that, as long as it continues to be invoked, will not
// be triggered. The function will be called after it stops being called for
// N milliseconds. If `immediate` is passed, trigger the function on the
// leading edge, instead of the trailing.
function debounce(func, wait, immediate) {
  var timeout;
  return function() {
    var context = this,
      args = arguments;
    var later = function() {
      timeout = null;
      if (!immediate) func.apply(context, args);
    };
    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
};
* {
  box-sizing: border-box;
  font-family: Roboto, sans-serif;
}

.container {
  display: flex;
  flex-direction: row;
  width: 10rem;
  height: 22rem;
  border-radius: 3rem;
  border: solid 0.2rem #b2b2c2;
  background-color: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scrollport:before,
.scrollport:after {
  content: '';
}

.scrollport {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  width: 9.4rem;
  height: 22rem;
  overflow: auto;
  scroll-snap-type: y mandatory;
}

.scrollport:before,
.scrollport:after,
.cell {
  display: block;
  scroll-snap-align: center;
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 33.3%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #e9e9f2;
  font-size: 2.4rem;
}

.selected {
  font-size: 3rem;
  font-weight: bold;
  color: #0073e6;
}
<div class="container">
  <div class="scrollport">
    <div class="cell">09</div>
    <div class="cell selected">10</div>
    <div class="cell">11</div>
    <div class="cell">12</div>
    <div class="cell">13</div>
    <div class="cell">14</div>
    <div class="cell">15</div>
    <div class="cell">16</div>
  </div>
</div>
3
yunzen 13 Авг 2019 в 10:39

Вы можете попробовать этот код здесь:

В этом ответе использовался jquery malihu-custom-scrollbar-plugin ссылка и обновите код здесь

(function($){
    $(window).on("load",function(){
        $(".scrollport").mCustomScrollbar({autoHideScrollbar:true});
    });
})(jQuery);
* {
  box-sizing: border-box;
  font-family: Roboto, sans-serif;
}

.container {
  display: flex;
  flex-direction: row;
  width: 10rem;
  height: 22rem;
  border-radius: 3rem;
  border: solid 0.2rem #b2b2c2;
  background-color: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.scrollport {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  width: 9.4rem;
  height: 22rem;
  overflow: auto;
}

.cell {
  flex-basis: 120px;
  height: 120px;
  color: #e9e9f2;
  font-size: 2.4rem;
  display: flex; 
  align-items: center;
  justify-content: center;
  padding-left: 20px;
}

.selected {
  font-size: 3rem;
  font-weight: bold;
  color: #0073e6;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.css" rel="stylesheet" />

<div class="container">
  <div class="scrollport">
    <div class="cell">09</div>
    <div class="cell selected">10</div>
    <div class="cell">11</div>
    <div class="cell">12</div>
    <div class="cell">13</div>
    <div class="cell">14</div>
    <div class="cell">15</div>
    <div class="cell">16</div>
  </div>
</div>
0
Md. Abu Sayed 29 Май 2019 в 08:46