Blenden Sie die Bildlaufleiste der verschachtelten div aus, machen Sie sie jedoch noch scrollbar

Dies ist eine Referenz, die ich verwendet habe. Dort wird erläutert, wie ein Div-Bildlauf mit ausgeblendeter Bildlaufleiste angezeigt werden kann. Der einzige Unterschied ist, dass ich divs verschachtelt habe. Überprüfen Sie meine Geige

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;
}

Wie oben habe ich ein überlaufendes horizontales div und möchte die Bildlaufleiste ausblenden. Ich muss es noch scrollbar machen, da $.scrollTo() sonst nicht funktionieren würde.

UPDATE:

Ich habe alle Antworten gelesen, aber ich habe mein Problem immer noch nicht gelöst und weiß nicht, was es verursacht. Dies ist das Live, das Probleme hat ... Im Grunde versuche ich this fast genau das gleiche zu folgen, aber es muss einen Grund geben, dass meine Website nicht wie erwartet funktioniert. Es gibt zwei Probleme.

1. Wenn ich overflow: hidden auf einen übergeordneten Container mit scrollbaren Elementen eingestellt habe, kann ich keinen Bildlauf durchführen (native JavaScript-Bildlauffunktionen funktionieren ebenfalls nicht).
2. Ich möchte nur den überlaufenden Container scrollen, nicht das gesamte Fenster. Dies kann durch Festlegen eines Ziels in $.localScroll({ target: '#projects-content' }) durchgeführt werden, es wird jedoch kein Bildlauf durchgeführt, wenn ich das Ziel setze. Wenn nicht, funktioniert das Scrollen so lange, wie overflow:hidden nicht angewendet wird . Wieder wäre jede Hilfe sehr dankbar.

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;
}

Update:

Nachdem ich overflow:scroll zu #project-content hinzugefügt habe, funktioniert das Scrollen wie erwartet. Jetzt brauche ich nur, dass Bildlaufleisten in #project-content verschwinden. Ich habe versucht, overflow:hidden zu seinem übergeordneten Element hinzuzufügen, hatte aber keinen Erfolg. Ich habe auch versucht, es zu html, body hinzuzufügen, aber dann akzeptiert das gesamte Dokument keine Bildlauffunktionen wie scrollTop().

Jede Hilfe wird sehr geschätzt!