将您带到水平滚动网站中的锚点的按钮

Question

我希望有一个按钮可以将我带到水平滚动网站的特定部分。

我正在使用Wordpress。我愿意使用任何主题（或自定义任何主题），因为我已经尝试了几种。

我尝试使用id，elementor菜单锚点，'页面滚动id'插件...仅当网站垂直滚动时，所有内容才起作用。

我在WP Customizer中添加了自定义CSS，使其水平。仅在使用鼠标滚动时有效。

但是，当您单击按钮（或文本，或其他使您进入#id_name的按钮时，id或锚链接不会使页面水平滚动。

我知道它与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

如果我做对，您想水平滚动，可以使用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坐标中滚动

希望这会有所帮助。

Answer 2

我的解决方案不是特定于Wordpress主题的，但是我希望它能帮助您。如果您要发布HTML标记，我可以针对您的情况给出更具体的答案：）

假设您的页面布局已经通过水平滚动设置，那么您将需要采取以下步骤来使锚功能正常工作：

• 在要滚动到的元素上设置ID。
• 在您要触发此滚动的按钮/链接上设置点击侦听器。
• 单击按钮时，获得要滚动到的元素的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。

---

动画？

作为奖励，您可以为滚动制作动画，所以这不仅仅是瞬间的“跳跃”。我也很乐意概述如何做到这一点，请让我知道。