javascript - 左右定位的奇怪结果不同

Question

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

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

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

https://jsfiddle.net/pphfstos/3/

不太理想的是像这样滑动整个宽度

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

https://jsfiddle.net/pphfstos/4/

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

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

https://jsfiddle.net/pphfstos/5/

正如您在 fiddle 中看到的那样，还涉及其他代码，但这些是这 3 个示例之间唯一不同的地方 谁能解释一下发生了什么以及如何解决它？

Answer 1

您放置在视口(viewport)外部左侧的内容实际上是隐藏的，并且无法通过滚动到达。

您将内容放置在视口(viewport)之外的右侧，但是会朝该方向“延伸”页面，并且可以滚动到。

从你的第一个和第三个 fiddle 中的 html/body 中删除 overflow-x:hidden ，你就会明白我的意思 - 在第一个，位于左侧的内容被隐藏，并且不出现滚动条；然而，在你的第三个 fiddle 中，你确实得到一个滚动条，并且可以通过滚动到达位于右侧的内容，将页面最初可见的部分移动到左侧.

现在，设置 overflow-x:hidden 会删除使用鼠标滚动的功能；但视口(viewport)仍然可以“移动”以显示该内容，例如通过导航到 anchor - 这就是您的链接正在做的事情。 (但是因为这是“即时跳转”并且滚动不流畅，所以您不会看到最初可见的内容移开，它只是立即消失。)

因此，您只需在点击事件处理程序中抑制 anchor 链接的默认操作即可:

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

——页面“跳转”到 anchor 位置的效果消失了。

https://jsfiddle.net/pphfstos/6/