Forum PHP.pl > [CSS][HTML] Pasek z buttonami scrolowany

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [CSS][HTML] Pasek z buttonami scrolowany

AQuatro

22.03.2023, 01:42:54

Witam.
Chcę stworzyć na stronie poziomy pasek, na którym jest dużo buttonów. Wszystko poukładane poziomo.
Buttonów jest oczywiście dużo więcej niż mieścić się może na stronie, ale za pomocą scrolla można przewijać i wybrać odpowiedni button.
Mój problem polega na tym, że chciałbym aby ten pasek sam się przewinął do pozycji klikniętego buttona, w ten sposób, żeby aktywny button był mniej więcej na środku.
Może dałoby się to jakoś zrobić używając:
<body onload="document.getElementById('in').focus()">
Ale mam jeszcze dodatkowy problem, chciałbym, żeby focusowało się na aktywnym polu formularza, gdzie będą wprowadzane dane a tę opcję można wykorzystać chyba tylko w jednym miejscu.
W związku z tym moje pytanie, czy znacie jakiś sposób przykład. Na stworzenie długiego, poziomego paska z buttonami, którego tylko fragment widoczny jest na stronie i sposób na jakieś przewinięcie go do wybranego pewnego elementu.

LowiczakPL

22.03.2023, 10:41:07

może coś w ten sposób

[HTML] pobierz, plaintext 
<style>
#container {
  overflow-x: scroll;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  width: 200px;
}
 
button {
  margin: 0 10px;
  height: 50px;
  width: 50px;
}
</style>
<div id="container">
  <button onclick="scrollToCenter(this)">Button 1</button>
  <button onclick="scrollToCenter(this)">Button 2</button>
  <button onclick="scrollToCenter(this)">Button 3</button>
  <button onclick="scrollToCenter(this)">Button 4</button>
  <button onclick="scrollToCenter(this)">Button 5</button>
</div>
<script>
function scrollToCenter(button) {
  var container = button.parentNode;
  var containerWidth = container.offsetWidth;
  var buttonWidth = button.offsetWidth;
  var buttonLeft = button.offsetLeft;
  var buttonHalfWidth = buttonWidth / 2;
  var buttonCenter = buttonLeft + buttonHalfWidth;
  var scrollLeft = buttonCenter - (containerWidth / 2);
  container.scrollTo({
    left: scrollLeft,
    behavior: 'smooth'
  });
}
</script>
[HTML] pobierz, plaintext

AQuatro

22.03.2023, 12:43:18

Dzięki. Działa to bez zarzutu i dokładnie jest to to co chciałem.
Jest tylko problem. Nie działa gdy div umieszczę wewnątrz '<form></form>' nie rozumiem dlaczego.

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.