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