Как я могу динамически изменять горизонтальное положение элемента при использовании as overflow в качестве прокрутки?

#javascript #html #css #reactjs

#javascript #HTML #css #reactjs

Вопрос:

При нажатии на другое название метки я могу динамически перемещать «активный класс» на экранах мобильных устройств. Пока все работает нормально. Но проблема в том, что когда я перенаправляю с другой страницы на имя метки, идущее после первого экрана, его активный класс подразумевает динамическое. Но не могу видеть на первом экране, если я не прокручиваю его по горизонтали.

Ожидаемо: я хочу, чтобы моя активная часть метки была видна на первом экране, как только она активна, и без ручной прокрутки.

 .tab_links_parent.common {
  display: inherit;
  background: #2a2044;
  grid-auto-flow: inherit;
  margin-bottom: 24px;
  overflow: auto;
  white-space: nowrap;
}

.tab_links_parent.common label {
  letter-spacing: 0;
  display: inline-block;
  text-align: center;
  opacity: 0.6;
  color: #ffffff;
  font-size: 12px;
  letter-spacing: 0;
  display: inline-block;
  text-align: center;
  line-height: 22px;
}

.tab_links_parent.common label.active {
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
  line-height: 18px;
  opacity: 1;
  padding-bottom: 5px;
  position: relative;
}

.tab_links_parent.common label:nth-child(1) {
  width: 36%;
}

.tab_links_parent.common label:nth-child(2) {
  width: 44%;
}

.tab_links_parent.common label:nth-child(3) {
  width: 30%;
}

.tab_links_parent.common label:nth-child(4) {
  width: 30%;
}

.tab_links_parent.common label.active:after {
  content: "";
  width: calc(100%);
  height: 1px;
  bottom: 0;
  display: block;
  background: #ffffff;
}

 <div class="tab_links_parent common">
  <label class="hand">Payment History</label>
  <label class="hand ">Credit Card Utilisation</label>
  <label class="hand  active">Credit History</label>
  <label class="hand ">Total Accounts</label>
  <label class="hand ">Credit Enquiries</label>
</div>

Ответ №1:

Пожалуйста, попробуйте это, используйте scrollIntoView для выравнивания элемента.

Прежде всего, я добавляю active класс при нажатии на ссылку. Затем активный элемент должен быть выровнен по центру.

 scrollIntoView({behavior: "smooth", block: "center", inline: "center"})

 var hands= document.querySelectorAll(".hand");
var ele = document.querySelector(".hand.active");
ActiveItem(ele);
function ActiveItem(element){
  for(i=0;i<hands.length;i  ){
    hands[i].classList.remove('active');
  }
element.classList.add('active');
element.scrollIntoView({behavior: "smooth", block: "center", inline: "center"});
}

 .tab_links_parent.common {
  display: inherit;
  background: #2a2044;
  grid-auto-flow: inherit;
  margin-bottom: 24px;
  overflow: auto;
  white-space: nowrap;
}

.tab_links_parent.common label {
  letter-spacing: 0;
  display: inline-block;
  text-align: center;
  opacity: 0.6;
  color: #ffffff;
  font-size: 12px;
  letter-spacing: 0;
  display: inline-block;
  text-align: center;
  line-height: 22px;
}

.tab_links_parent.common label.active {
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
  line-height: 18px;
  opacity: 1;
  padding-bottom: 5px;
  position: relative;
  
}



.tab_links_parent.common label {
  width: 40%;
}

.tab_links_parent.common label.active:after {
  content: "";
  width: calc(100%);
  height: 1px;
  bottom: 0;
  display: block;
  background: #ffffff;
}

 <div class="tab_links_parent common">
  <label class="hand " onclick="ActiveItem(this)">Payment History</label>
  <label class="hand "  onclick="ActiveItem(this)">Credit Card Utilisation</label>
  <label class="hand  active "  onclick="ActiveItem(this)">Credit History</label>
  <label class="hand "  onclick="ActiveItem(this)">Total Accounts</label>
  <label class="hand "  onclick="ActiveItem(this)">Credit Enquiries</label>
</div>