时间戳

首页 > 解决方案 > 将您带到水平滚动网站中的锚点的按钮

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

问题描述

我想要一个按钮，将我带到我的水平滚动网站的特定部分。

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

我尝试使用 id、elementor 菜单锚点、'page to scroll 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
}

标签： csswordpressanchorhorizontal-scrollingelementor

解决方案

我的解决方案并非特定于 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属性的锚标记，因为我们应该保持它与 Web 可访问性指南保持一致。如果需要，欢迎您使用 a<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定位。

动画？

作为奖励，您可以为滚动设置动画，因此它不仅仅是一个瞬间的“跳跃”。我也很乐意概述如何做到这一点，请告诉我。

推荐阅读