Javascript 隐藏嵌套div的滚动条，但仍使其可滚动

是我使用的一个引用，它解释了如何使div在滚动条隐藏的情况下可滚动。唯一的区别是我有嵌套的div。检查我的

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>

#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 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>

像上面一样，我有一个溢出的水平div，我想隐藏它的滚动条。我必须使它仍然可以滚动，因为

$.scrollTo（）

否则无法工作

更新：

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

#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 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>

我已经阅读了所有的答案，但我仍然没有解决我的问题，也不知道是什么原因造成的。这是有麻烦的现场直播。 基本上，我试图遵循几乎完全相同的，但一定有一些原因，我的网站没有按预期工作。有两个问题

当我将

overflow:hidden

设置为可滚动项的父容器时，我无法滚动（本机javascript滚动函数也不起作用）

我只想滚动溢出的容器，而不是整个窗口。这可以通过在

$.localScroll（{target:'#projects content'}）

中设置目标来实现，但设置目标时不会滚动。如果我不这样做，只要不应用

溢出：隐藏
，滚动就可以工作。
再次感谢您的帮助

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>

#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 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>

更新：

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

#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 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>

在我添加了

overflow:scroll

到

#project content

之后，滚动工作正常。我现在只需要让滚动条消失在

#项目内容中

。我尝试将

overflow:hidden

添加到其父级，但没有成功。我还尝试将其添加到

html，body

，但整个文档拒绝接受任何滚动函数，如

scrollTop（）

---

任何帮助都将不胜感激

这是一种欺骗，但你能像这样把它藏在

#内容

后面吗

---

scollbars大约占20px，因此只需将可滚动div设置为更高20px和更宽20px，您的滚动条就会被隐藏：

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

---

如果您知道所有可以滚动的容器，您可以使用CSS和一点JS隐藏滚动条。对于基于webkit的浏览器（safari、google chrome、opera），将滚动条宽度设置为0将是CSS唯一的解决方案。对于IE、Firefox和其他非webkit浏览器，您应该计算滚动条宽度，该宽度将用作可滚动内容的负边距

为此，您应该使用

overflow-y:scroll

将内容包装到div中，以始终显示垂直滚动条，并使用

margin right:-17px

和父级

overflow:hidden

隐藏此滚动条。例如。无需设置固定宽度，也无需设置固定高度

这就是我们所用的方法。隐藏水平滚动条更为复杂，需要处理内容更改以重新计算容器高度。

技术是使用一个比滚动条的子元素短的父容器。此图显示了我的意思：

做法： 在您的情况下，我建议对

#project content

使用绝对定位和负底部值，这样它会溢出底部的父容器（

#projects

）

现在的点是什么负值？它的值应与滚动条的宽度相同，但根据浏览器的不同，滚动条的宽度也不同。所以我建议给它一个更大的值：

-30px

，以确保它是隐藏的。你只需要小心，你没有内容接近底部，可以隐藏在浏览器与薄滚动条

这是您应该添加到网站的CSS：

#projects{
    position: relative;
}

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

---

我基本上添加了

填充：0 1em 1em 0填充底部

或仅

填充右侧

，如果只隐藏其中一个

1em是大多数浏览器中滚动条的平均宽度：

使用脚本创建自定义滚动条

然后使用CSS（或修改脚本或更改脚本配置）隐藏自定义滚动条

---

使内容本身具有水平滚动的解决方案

只需增加#main和#content的高度即可

}

}

}

---

我使用jQuery和您的示例粗略地做到了这一点

选中此项：

我只是检测到了滚轮的方向，然后用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（）可以设置动画。。对于平滑过渡。

您可以考虑查看插件，例如。至少你可以找出代码的作用，并重现你想混淆的部分？只需使用上面问题中的代码。那么像这样？也许我没抓住重点，但你为什么需要它呢？这是什么

$.scrollTo（）

您仍然可以在vanilla JS中使用

dom.scrollLeft

和

dom.scrollTop

，并使用

溢出：隐藏嗨@drew\w非常感谢你帮助我。我更新了这个问题，以便更好地解释我为什么会遇到麻烦。@MaximusS没有回答你的问题，只是提醒一下：从可用性的角度来看，你将要做的是一个非常糟糕的主意！用户通过滚动条识别可滚动内容。如果没有JS，您的内容将无法访问。所以我不建议你做这样的事情。你贴的小提琴和OP的完全一样。谢谢你，更新了。嗨@Niklas，谢谢你帮助我。不幸的是，这并没有解决我的问题。你能看看我的更新吗？滚动条在任何浏览器上都是17px的。不幸的是，没有。它可以有不同的大小。还有，阴囊