在沒有JS的CSS事件之後在頁面內維護滾動位置？

我有一個包含一系列「幻燈片」和一個菜單的大頁面，用於選擇您想要查看的頁面。菜單中的鏈接會將您帶到相應的幻燈片，但打開或關閉菜單會使您返回到頁面頂部，完全無法達到目的。在沒有JS的CSS事件之後在頁面內維護滾動位置？

我正在使用CSS將菜單按入菜單按鈕時單擊視圖;如何防止頁面在打開/關閉菜單後改變滾動位置？如果可能，我想盡量避免使用JS，但如果有必要的話可以使用。

菜單打開CSS：

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

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

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

來源

2016-03-20 user5104897

這是因爲點擊會使頁面滾動到複選框是可見窗框。解決方案非常簡單：將.nav-trigger設置爲position: fixed;。

Updated CodePen。

來源

2016-03-20 19:32:29

謝謝，這個修好了！ – user5104897

可能是錯的，但我認爲這是不可能的，只有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

來源

2016-03-20 18:56:18 yckart

在沒有JS的CSS事件之後在頁面內維護滾動位置？

回答

相關問題