隐藏嵌套div的滚动条，但仍可滚动。

17 浏览
0 Comments

隐藏嵌套div的滚动条，但仍可滚动。

这个问题已经有了答案:

隐藏滚动条，但仍能滚动

这里是我使用的参考资料，它解释了如何使一个带有隐藏滚动条的div可滚动。唯一的区别是我有嵌套的divs。查看我的fiddle

HTML：

                a
                b
                c

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()将无法工作。

更新：

我已经阅读了所有的答案，但我仍然没有解决我的问题，也不知道导致问题的原因。这是有问题的现场。

基本上，我试图按照这个几乎完全相同的方式进行，但我的网站没有像预期的那样工作。有两个问题。

  1. 当我将overflow: hidden设置为可滚动项的父容器时，我无法滚动（本地javascript滚动函数也无法工作）。
  2. 我只想滚动溢出的容器，而不是整个窗口。可以通过在$.localScroll({ target: \'#projects-content\' })中设置目标来实现这一点，但当我设置目标时，什么都不会滚动。如果不这样做，在没有应用overflow:hidden的情况下，滚动就会起作用。

    再次感谢任何帮助。

HTML：

 
    
      first
    
    
      second
    
    
      third

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

更新：

在我为 #project-content 添加了 overflow:scroll 之后，滚动效果如预期一样工作了。现在我只需要让滚动条在 #project-content 中消失。我尝试将其父元素添加 overflow:hidden，但没有成功。我还尝试将其添加到 html，body，但整个文档都不接受任何滚动函数，如 scrollTop()。

任何帮助将不胜感激！

admin 更改状态以发布 2023年5月21日
0

2 答案

0 Comments

滚动条占用大约20像素，因此只需将您的可滚动div增高20像素并加宽20像素，您的滚动条将被隐藏：

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

示例

0
0 Comments

理论：

这项技术的做法是使用一个比具有滚动条的子元素更短的父容器。这张图片展示了我的意思：

隐藏滚动条

实践：

在您的情况下，我建议使用绝对定位和负底部值在#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