web-dev-qa-db-ja.com

ネストされたdivのスクロールバーを非表示にしますが、スクロール可能にします

This は私が使用したリファレンスで、スクロールバーを非表示にしてdivをスクロール可能にする方法を説明しています。唯一の違いは、divがネストされていることです。私の fiddle を確認してください

HTML：

_<div id="main">
    <div id="sub-main">
        <div id="content">
            <div id="item-container">
                <div class="item">a</div>
                <div class="item">b</div>
                <div class="item">c</div>
            </div>
        </div>
    </div>
</div>
_

CSS：

_#main {
    width: 500px;
    height: 500px;
}

#sub-main {
    width: 500px;
    height: 500px;
    overflow: hidden;
}

#content {
    background-color: red;
    width: 500px;
    height: 500px;
    overflow: auto;
}

#item-container {
    width: 1500px;
    height: 500px;
}

.item {
    width: 500px;
    height: 500px;
    font-size: 25em;
    text-align: center;
    float: left;
}
_

上記のように、オーバーフローした水平divがあり、そのスクロールバーを非表示にします。それ以外の場合は$.scrollTo()が機能しないため、スクロール可能にする必要があります。

UPDATE：

すべての回答を読みましたが、まだ問題を解決しておらず、何が原因なのかわかりません。これが問題を抱えているライブです。基本的に、私は this をほぼ同じようにしようとしていますが、私のWebサイトが期待どおりに機能しない理由がいくつかあるに違いありません。 2つの問題があります。

  1. _overflow: hidden_をスクロール可能なアイテムの親コンテナに設定すると、スクロールできません（ネイティブJavaScriptスクロール関数も機能しません）。
  2. ウィンドウ全体ではなく、オーバーフローしたコンテナのみをスクロールしたい。これは$.localScroll({ target: '#projects-content' })でターゲットを設定することで実行できますが、ターゲットを設定しても何もスクロールしません。そうしないと、_overflow:hidden_が適用されていない限り、スクロールは機能します。繰り返しますが、どんな助けも大歓迎です。

HTML：

_<div id="projects"> <!-- start of entire projects page -->
  <div id="project-sidebar">
    <a href="#project-first">
      <div class="sidebar-item sidebar-first">first</div>
    </a>
    <a href="#project-second">
      <div class="sidebar-item sidebar-second">second</div>
    </a>
    <a href="#">
      <div class="sidebar-item sidebar-third">third</div>
    </a>
  </div>

  <div id="project-content"> <!-- this must be the scrollable itmes' container, not the entire window -->
    <div id="project-first" class="project-item"> 
      <!-- these items should be scrollable -->
      <div class="project-subitem" id="first-sub1">
        <a href='#first-sub2' class='next'>next</a>
      </div>
      <div class='project-subitem' id='first-sub2'>
        <a href='#first-sub1' class='prev'>prev</a>
      </div>
      <!-- end of scrollable items -->
    </div>
  </div> <!-- end of scroll scroll container -->
</div> <!-- end of entire projects page -->

<script>
  // FIXME: when I set target, nothing scrolls.
  // But I don't want the entire window to scroll
  $('#projects').localScroll({
    //target: '#project-content',
    hash: false
  });
</script>
_

[〜＃〜] css [〜＃〜]

_#project-content {
  width: 80%;
  height: 100%;
  position: relative;
  float: left;
}

#project-sidebar {
  float: left;
  width: 20%;
  height: 100%;
}

.project-item {
  width: 300%;
  height: 100%;
}

.project-subitem {
  height: 100%;
  width: 33.33%;
  position: relative;
  float: left;
}
_

更新：

_overflow:scroll_を_#project-content_に追加した後、スクロールは期待どおりに機能します。 _#project-content_でスクロールバーを非表示にするだけです。 _overflow:hidden_をその親に追加しようとしましたが、成功しませんでした。また、_html, body_に追加しようとしましたが、ドキュメント全体がscrollTop()などのスクロール機能を受け入れません。

どんな助けも大歓迎です！

javascripthtmlcssscroll
13
Maximus S

理論：

テクニックは、スクロールバーを持つ子要素よりも短い親コンテナを使用することです。この画像は私が意味するものを示しています：

Hide scollbar

練習 ：

あなたの場合、#project-contentに絶対位置と負のボトム値を使用することをお勧めします。そのため、ボトムの親コンテナ（#projects）がオーバーフローします。

ポイントは今、どのような負の値ですか？スクロールのwithと同じ値にする必要がありますただしスクロールバーはブラウザーによって同じ幅になることはありません。そのため、より大きな値：-30pxを指定して、確実に非表示にすることをお勧めします。細いスクロールバーを備えたブラウザで非表示にできるコンテンツを最下部近くに配置しないように注意する必要があります。

これは、Webサイトに追加する必要があるCSSです。

#projects{
    position: relative;
}

#project-content{
    position: absolute;
    top: 0;
    left: 20%;
    bottom: -30px;
    /* remove: 
        height: 100%; 
        position: relative; 
        float: left; 
        padding-bottom: -15px
    /*
}
13
web-tiki

scollbarは約20pxを占めるため、スクロール可能なdivを20pxより高く、20pxより広くすると、スクロールバーが非表示になります。

#content {
    background-color: red;
    width: 520px;
    height: 520px;
    overflow: auto;
}

例

4
Pete

それは一種の不正行為ですが、#contentこのように [〜＃〜] demo [〜＃〜]

#content {
    background-color: red;
    width: 500px;
    height: 480px;
    overflow: hidden;
}

#item-container {
    width: 1500px;
    height: 500px;
    overflow: scroll;
}
3
Niklas

スクロール可能なすべてのコンテナを知っている場合は、CSSと少しのJSでスクロールバーを非表示にできます。 Webkitベースのブラウザー（safari、google chrome、opera）の場合、スクロールバーの幅を0に設定するのはCSSのみのソリューションです。IE、Firefox、およびその他の非Webkitブラウザーの場合、負のマージンとして使用されるスクロールバーの幅を計算する必要があります。スクロール可能なコンテンツに最適です。

そのためには、コンテンツをoverflow-y:scrollでdivにラップし、常に垂直スクロールバーを表示し、margin-right:-17pxと親overflow:hiddenでこのスクロールバーを非表示にする必要があります。例は here です。固定幅や高さを設定する必要はありません。

これは jQuery Scrollbar で使用された方法です。水平スクロールバーの非表示はより複雑で、コンテンツの変更を処理してコンテナの高さを再計算する必要があります。

3
Gromo

水平スクロールでコンテンツ自体を作成するソリューション。

#mainと#contentの高さを増やすだけです。

#main {
    width: 500px;
    height: 520px;

}

#sub-main {
    overflow: hidden;

}

#content {
    background-color: red;
    width: 500px;
    height: 520px;
    overflow: auto;

}

#item-container {
    width: 1500px;
    height: 500px;
    overflow: hidden;
}

.item {
    width: 500px;
    height: 500px;
    font-size: 25em;
    text-align: center;
    float: left;
}
2
Samuraik

基本的に、padding:0 1em 1em 0;を非表示にする要素に追加します。これにより、親にオーバーフローがある場合、両方のスクロールバーが非表示になります。そのうちの1つだけを非表示にする場合は、padding-bottomまたはpadding-rightのみを調整します。

1emは、ほとんどのブラウザのスクロールバーの平均幅です。 http://jsfiddle.net/5GCsJ/912/

2
G-Cyr
  1. スクリプトを使用して、カスタムスクロールバーを作成します。

http://manos.malihu.gr/jquery-custom-content-scroller/

  1. 次に、CSS（またはスクリプトの変更またはスクリプト構成の変更）を使用して、カスタムスクロールバーを非表示にします。
1
Pawel

私はjQueryとあなたの例を大雑把に使用してこれを行いました

これを確認してください fiddle ：

スクロールホイールの方向を検出し、jQueryで水平スクロールバーを押しただけです。

$(document).ready(function(){
    $('#content').bind('mousewheel', function(e){
        var curScroll = $("#content").scrollLeft();
        if(e.originalEvent.wheelDelta > 0) {            
            $("#content").scrollLeft(curScroll-500);
        } else {
            $("#content").scrollLeft(curScroll+500);
        }
    });
});

スクロールする500pxの量などの値をハードコーディングしたため、「粗野」です。スクロールする量を動的に検出するために、さらにJavaScriptを記述することができます。また、wheelDeltaの値が、あなたや他のユーザーにとって、アップで+120、ダウンで-120になるかどうかはわかりません。

また、scrolLeft（）をアニメーション化して、スムーズなトランジションを実現できることにも注意してください。

0
petsoukos