16

たとえば、非表示にできるサイドバーやパネルを作成する場合など、ビューポートからスライドさせて非表示にできると便利な場合があります。しかし、ウィンドウの右端または下端を超えて何かを押すと、ブラウザー（私の場合はChrome）が自動的にスクロールバーを追加します。これで、ユーザーは非表示にしようとした要素までスクロールできます。（JSFiddleの例）

body要素を設定することでスクロールバーを削除できますoverflow-x: hiddenが、それによって他の多くの副作用が発生します。たとえば、ユーザーが誤ってクリックして画面の端を超えてドラッグする可能性があります。これで、ユーザーには「非表示」要素が表示され、ブラウザーの動作がわからない場合にもスタックする可能性があります。（JSFiddleの例）

これらの欠点を経験せずに、この「画面から消える」効果をどのように達成できますか？

4

3 に答える 3

20

この問題を解決するために私が見つけた最善の方法は、同じサイズの非表示のラッパー内に要素を配置することです。ラッパーは持つ必要がoverflow: hiddenあり、要素はラッパーの端の外側ではなく、ラッパーの端の外側にプッシュする必要があります<body>。

このソリューションの秘訣は、実際には何も画面から離れないため、ブラウザがビューポートのサイズを大きくして補正しようとしないことです。代わりに、ラッパーは画面の端に置かれ、サイドバーは画面の内側にあります。ラッパーを不透明度マップと考えてください。

また、ラッパーを0にサイズ変更して、ドキュメントの上に非表示にならず、意図しないクリックを取得しないようにする必要があります。

これが実際の解決策の例です。私はjQueryを使用してCSSを操作しましたが、JavaScriptライブラリー（またはなし）でうまくいきます。サイドバーラッパーが縮小されない限り、「クリッカー」divはクリックできないことに注意してください。

$('.sidebar-inner').on('click', function() {
    $(this).css('right', -250);
    $(this).closest('.sidebar-outer').css('width', 0);
});

$('.clicker').on('click', function() {
    alert('CLICKED!');
});
body
{
    background-color: red;
    font: 12pt sans-serif;
}

.sidebar-outer
{
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    width: 250px;
    
    -webkit-transition: width 0.2s ease-out;
    -moz-transition: width 0.2s ease-out;
    transition: width 0.2s ease-out;
    
    overflow: hidden;
    z-index: 999;
}

.sidebar-inner
{
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    width: 250px;
    padding: 10px;
    box-sizing: border-box;
    
    -webkit-transition: right 0.2s ease-out;
    -moz-transition: right 0.2s ease-out;
    transition: right 0.2s ease-out;
    
    background-color: cornflowerblue;
    cursor: pointer;
}

.clicker
{
    position: absolute;
    width: 50px;
    height: 50px;
    top: 10px;
    right: 10px;
    padding: 10px;
    
    background-color: green;
    cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="sidebar-outer">
    <div class="sidebar-inner">
        Click to hide
    </div>
</div>

<div class="clicker">Click me!!</div>

于 2012-06-07T22:24:03.240 に答える
6

簡単な解決策（確かに常に実行可能とは限りません）はposition:fixed、の代わりにサイドバーに設定することですposition:absolute。

フィドル

$('.sidebar').on('click', function() {
  $(this).css('right', -250);
});
.sidebar {
  position: fixed;
  top: 0px;
  right: 0px;
  bottom: 0px;
  width: 250px;
  -webkit-transition: right 0.2s ease-out;
  -moz-transition: right 0.2s ease-out;
  transition: right 0.2s ease-out;
  cursor: pointer;
  background-color: cornflowerblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidebar">
  Click to hide
</div>

于 2015-04-15T08:45:24.760 に答える
0

見えないものをラップするのは悪い考えです。画面の外に移動する理由を知っておく必要があるためです。非表示にするだけでなく、非表示にするだけでも良い方法がたくさんあります。画面の外に移動する場合の最大のメリットは、大きな画像、ビデオ、またはiframeのニュースフィードなどの他のコンポーネントを処理する場合です。それはそれのためにレンダリングをキャッシュし、重要な効果的な改善を行います。

于 2014-01-02T08:46:18.633 に答える