用CSS過渡隱藏元素離屏

我正在製作一個網頁應用程序，其中包含一個隱藏的側邊欄，通過從右側移動出現。實現此目的最明顯的方法是在父元素上隱藏側邊欄overflow: hidden;，並使用css轉換爲right屬性設置動畫，以便在用戶按下按鈕時顯示該屬性。用CSS過渡隱藏元素離屏

但是，我發現儘管overflow: hidden;禁用了滾動條，用戶仍然可以通過使用Ctrl + F或標籤邊欄上的元素將父元素滾動到側邊欄，同時它應該隱藏在屏幕外，在這個過程中推動了一些主要的應用程序。

Here's a JSFiddle I made to demonstrate the problem.

雖然這不是一個特別大的問題（它可以通過只需再次切換側邊欄是固定的），這顯然是不可取的，我還沒有找到一個好辦法來對付它。

我可以使用JavaScript來監聽transitionend事件來設置visibility到hidden側邊欄上，這樣的文本不能被選中時，側邊欄被隱藏，但用戶仍然能夠做到這一點，而轉變正在發生並且無論如何滾動屏幕外。

我也可以把所有的文字放在僞元素中，並在所有可聚焦的元素上添加tabindex="-1"，這樣就沒有任何東西可以選擇，但是看起來在頂部也很雜亂，不允許用戶Ctrl + F或Tab當側欄上的元素可見時，這是不理想的。

我也可以從左側顯示側邊欄而不是右側，但我寧願看看是否有更好的方式來完成此操作，而不是更改應用程序的整個設計。

道歉，如果這已在其他地方解決，但我已經四處搜索，沒有發現任何問題。

來源

2015-07-21 MrInanimated

一種解決方案是將#Sidebarposition設置爲fixed。並且還用transform: translateX()替換right來隱藏/顯示它。

JSFiddle link

來源

2015-07-21 13:42:24 knitevision

謝謝，這工作正如我打算！我仍然需要在邊欄隱藏的情況下添加'display：none'或'visibility：hidden'，以便用戶不能選擇任何內容。 – MrInanimated

同樣的問題在屏幕外的菜單上工作。這救了我的命！ –

這是一個有趣的案例，我沒有聽說過或者沒有想過，那個'錯誤'確實有道理。我猜這個問題是，文本是屏幕外和隱藏的，但仍然存在。我將該div設置爲display：none，然後通過您的javascript切換器更改此值，以便div變爲：display：inline，然後拉出。

來源

2015-07-21 13:33:14 Patrick

您可以檢查元素是否在視口之外，然後顯示：無。

This問題將幫助檢查元素是否在視口外。

來源

2015-07-21 13:34:48 Mintberry

使用另一個具有屬性顯示的類：none; - >這樣你將無法選中它/ ctrl + F它。

CSS：

#Sidebar { 
    ... 
    display: none; 
} 
#Sidebar.block { 
    display: block; 
}

的Javascript：

if (sidebar.classList.contains("open")) { 
    sidebar.classList.remove("open"); 
    setTimeout(function() { 
     sidebar.classList.remove("block"); 
    }, 3500); // consider faster transitions! 
} else { 
    sidebar.classList.add("block"); 
    setTimeout(function() { 
     sidebar.classList.add("open"); 
    }, 50); 
}

這裏的小提琴：https://jsfiddle.net/j9d0e7ug/2/

請注意，我用的setTimeout（），因爲塊和無之間以其他方式改變顯示銷燬動畫。也考慮更快的轉換:)

來源

2015-07-21 13:36:29 DekiChan

嗯，我仍然可以在轉換過程中關閉主容器。我想我應該這樣做的方式是設置更快的轉換，而不用太擔心。我只想問一下，在這種情況下，'visibility：hidden'和'display：none'是否有區別？目前我基本上是這樣做的，除非我使用'transitionend'來監視側邊欄何時返回，並在其上設置'visibility：hidden'而不是'display：none'。 – MrInanimated

我不能回答更好：http://stackoverflow.com/a/133064/3062961 :) – DekiChan

用CSS過渡隱藏元素離屏

回答

相關問題