Кнопка, ведущая на якорь на веб-сайте с горизонтальной прокруткой

Question

Я хочу иметь кнопку, которая приведет меня к определенной c части моего веб-сайта с горизонтальной прокруткой.

Я использую Wordpress. Я готов использовать любую тему (или настраивать любую тему), как я уже пробовал несколько.

Я пытался использовать id, привязки меню elementor, плагин "page to scroll id" ... Все работает, пока сайт прокручивается вертикально.

Я добавляю пользовательский CSS в WP Настройщик, чтобы сделать его горизонтальным. Он работает только при прокрутке с помощью мыши.

Однако идентификаторы или ссылки привязки не заставляют страницу прокручиваться горизонтально, когда вы нажимаете кнопку (или текст, или что-то еще, что приводит вас к #id_name).

Я знаю, что это связано с CSS, и что мне, вероятно, нужно использовать полосу прокрутки js, или что-то в этом роде, но я не могу найти что-то, что работает до сих пор. Я использую Astra Theme и Elementor.

Это дополнительные CSS, которые я использовал:

.elementor-inner {
  width: 100vh;
  height: 100vw;
  overflow-x: hidden;
  overflow-y: scroll;
  transform: rotate(-90deg) translateX(-100vh);
  transform-origin: top left;
  position: absolute;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.elementor-section-wrap {
  transform: rotate(90deg) translateY(-100vh);
  transform-origin: top left;
  display: flex;
  flex-direction: row;
  width: 600vw;
}

.section {
  width: 100vw;
  height: 10vh;
}

 ::-webkit-scrollbar {
  display: none
}

Надеюсь, что описанное выше опишет мою проблему. Любая помощь приветствуется. Заранее спасибо!

Answer 1

Мое решение не предназначено c для темы Wordpress, но я надеюсь, что оно все равно поможет. Если вы хотите опубликовать свою HTML разметку, я могу дать более конкретный c ответ для вашего сценария:)

Предполагая, что макет вашей страницы уже настроен с горизонтальной прокруткой, вот шаги, которые вы Нужно принять, чтобы эта функция привязки работала:

• Установите идентификатор для элемента, на который вы хотите перейти sh.
• Установите прослушиватель щелчка на кнопке / ссылке Вы хотите запустить эту прокрутку с.
• При нажатии кнопки получите свойство offsetLeft элемента, на который вы хотите перейти.
• Установите родительский контейнер scrollLeft свойство к этому значению сверху.

---

HTML:

<a href="#my-element" class="my-button">Scroll to Element!</a>

<!-- your existing markup -->
  <div id="my-element">
    <p>Content would go here</p>
  </div>
<!-- /your existing markup -->

Примечание: я использую якорный тег <a> с href атрибут здесь, так как мы должны держать это в соответствии с рекомендациями по доступности веб-сайтов. При необходимости вы можете использовать атрибут <button> и, возможно, data.

---

JavaScript:

// (These class names would be specific to your case)
const myButton = document.querySelector(".my-button");
const scrollContainer = document.querySelector(".scroll-container");

myButton.addEventListener("click", event => {
  // Prevents the link's default behavior:
  event.preventDefault();

  // Gives us the string: "#my-element":
  const link = this.href;

  // Finds the corresponding element:
  const element = document.querySelector(link);

  if (element) {
    const leftPosition = element.offsetLeft;

    // This line actually takes us to the element:
    scrollContainer.scrollLeft = leftPosition
  }
});

Несколько вещей здесь:

• Здесь вам нужно будет изменить различные имена классов в зависимости от того, как выглядит ваша HTML разметка.
• Единственное требование к точности свойства offsetLeft состоит в том, что Контейнер прокрутки имеет relative позиционирование.

---

Анимация?

В качестве бонуса вы можете анимировать прокрутку, так что это не просто мгновенный "прыжок". Я был бы рад обрисовать, как это сделать, просто дайте мне знать.

Answer 2

Если я правильно понял, вы хотите прокрутить по горизонтали, для этого вы можете сделать это, используя jQuery:

<script>

    $elementToScrollTo = $('#scroll-to');
    $whereToScroll = $elementToScrollTo.offset().left - 30; // 30px just to give some space before the element
    window.scrollBy($whereToScroll, 0);

</script>

Первая строка для выбора элемента, который вы хотите прокрутить до

Вторая строка для получения смещения влево (как далеко находится элемент слева [в пикселях])

Третья строка указывает окну прокручивать координаты X

Надеюсь, это поможет.