Question

这是我面临的一个奇怪的错误，我真的不明白这个问题所以原谅我这个晦涩的标题。问题是我正在开发SPA风格的网站，我希望内容从右侧滑入（当点击底部的按钮时）

我认为这很容易，但由于某种原因，从左侧很容易实现，使用下面的示例

.page {
  right: 100%;}
  .page.active {
    right: 0; }

并且不太理想，可以像这样滑动整个宽度

.page {
  left: -100%;}
  .page.active {
    left: 0; }

但是当我尝试创建与第一个例子相同的效果但是从右边它不仅不起作用而且完全似乎破坏了页面

.page {
  right: -100%;}
  .page.active {
    right: 0; }

您可以在小提琴中看到其他代码，但这些是3个示例中唯一不同的内容任何人都可以解释发生了什么以及如何解决它？

Answer 1

您在视口外部位于左侧的内容实际上是隐藏的，无法通过滚动来访问。

您在视口之外定位到右侧的内容，但是会在该方向“扩展”页面，并且可以滚动到该页面。

从您的第一个和第三个小提琴中移除overflow-x: hidden / html中的body，您就会明白我的意思 - 在第一个中，左侧的内容被隐藏，并且没有滚动条;然而，在你的第三个小提琴中你做获得一个滚动条，并且可以通过滚动来访问位于右侧的内容，移动最初在左边可见的页面部分

现在，设置overflow-x: hidden会删除使用鼠标滚动的功能;但视口仍然可以“移动”以显示该内容，例如通过导航到锚点 - 这就是您的链接正在进行的操作。（但是因为这是一个“即时跳转”而不是平滑滚动，你不会看到你最初可见的内容移开，它就会立即消失。）

因此，您只需要在Click事件处理程序中禁止锚链接的默认操作：

mainNavButton.click(function (e) {
    e.preventDefault(); // prevent event default action
    // … rest of your code

- 页面“跳跃”到锚位置的效果消失了。