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

Question

我有一个包含一系列“幻灯片”和一个菜单的大页面，用于选择您想要查看的页面。菜单中的链接会将您带到相应的幻灯片，但打开或关闭菜单会使您返回到页面顶部，完全无法达到目的。

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

菜单打开CSS：

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

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

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

Answer 1

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

Updated CodePen。

Answer 2

可能是错的，但我认为这是不可能的，只有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) 
}) 

http://codepen.io/anon/pen/wGJdOV