Question

我有一个大页面，上面有一系列＆＃34;幻灯片＆＃34;和一个菜单，以选择您要查看的那个。菜单中的链接会将您带到相应的幻灯片，但打开或关闭菜单会使您返回到页面顶部，完全无法达到目的。

单击菜单按钮时，我使用CSS将菜单推入视图;如何在打开/关闭菜单后阻止页面更改滚动位置？如果可能的话我想避免使用JS，但如果有必要的话可以。

菜单打开CSS：

.nav-trigger:checked + label{
    left: 200px;
}

.nav-trigger:checked ~ main{
    left: 200px;
}

CodePen：http://codepen.io/anon/pen/Rappqg

Answer 1

可能是错的，但我认为仅使用css是不可能的。阻止css中默认操作的最简单方法是使用pointer-events: none，但这不会影响页面的滚动行为。

使用javascript，您可以在事件处理程序中使用event.preventDefault()或return false。

但是，这不适用于复选框，因为它们在复选框更改之前触发。所以，为了使它工作，你可以做这样的事情：

var scrollX, scrollY

// Listen to click-event and get the current scroll offset
document.querySelector('label[for="nav-trigger"]').addEventListener('click', function () {
  scrollX = window.pageXOffset
  scrollY = window.pageYOffset
})

// Apply the cached scroll offset when the checkbox changes
document.querySelector('.nav-trigger').addEventListener('change', function () {
  window.scrollTo(scrollX, scrollY)
})

DEMO

Answer 2

这是因为点击会使页面滚动到复选框在可见窗口框架中的位置。解决方案非常简单：将.nav-trigger设置为position: fixed;。

Updated CodePen

在没有JS的CSS事件之后维护页面内的滚动位置？

2 个答案: