隐藏嵌套div的滚动条，但仍使其可滚动[重复]

Posted 2023-02-22

【中文标题】隐藏嵌套div的滚动条，但仍使其可滚动[重复]

【英文标题】：Hide scroll bar of nested div, but still make it scrollable [duplicate]

【发布时间】：2014-06-11 05:24:32

【问题描述】：

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

更新：

我已阅读所有答案，但我的问题仍未解决，也不知道是什么原因造成的。这就是有问题的live。 基本上，我试图遵循几乎完全相同的this，但我的网站无法按预期运行肯定是有原因的。有两个问题。

当我将 overflow: hidden 设置为可滚动项的父容器时，我无法滚动（原生 javascript 滚动功能也不起作用）。 我只想滚动溢出的容器，而不是整个窗口。这可以通过在$.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()。

任何帮助将不胜感激！

【问题讨论】：

您可能会考虑查看诸如jscrollpane 之类的插件。至少您可以找出该代码的作用并重现您想要保留的部分

我很困惑？只需使用该问题中的代码即可。 DEMO 就这样？

也许我没有抓住重点，但你为什么还需要它呢？这是什么$.scrollTo()你仍然可以在香草JS中使用dom.scrollLeft和dom.scrollTop，overflow: hidden;as shown in the example

嗨@drew_w 非常感谢您帮助我。我更新了问题以更好地解释我遇到问题的原因。

@MaximusS 没有回答您的问题，但请注意：从可用性的角度来看，您将要做的是一个非常糟糕的主意！用户习惯于通过滚动条识别可滚动内容。如果没有 JS，您的内容将无法访问。所以我不建议这样做。

【参考方案1】：

理论：

该技术是使用比带有滚动条的子元素短的父容器。这张图片说明了我的意思：

练习：

在您的情况下，我建议在 #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
    /*

【讨论】：

这在您使用移动设备后不起作用（它们具有不同的滚动条尺寸）。得走js路线。

【参考方案2】：

scollbars 大约占 20px，所以只要让你的可滚动 div 高 20px，宽 20px，你的滚动条就会被隐藏：

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

Example

【参考方案3】：

这有点作弊，但你能把它隐藏在#content 后面，就像这样DEMO

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


#item-container 
    width: 1500px;
    height: 500px;
    overflow: scroll;

【讨论】：

您发布的小提琴与OP的完全相同。

谢谢，更新了。

嗨@Niklas，感谢您帮助我。不幸的是，这并没有解决我的问题。你能看看我的更新吗？

【参考方案4】：

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

为此，您应该使用 overflow-y:scroll 将内容包装到 div 中，以始终显示垂直滚动条并使用 margin-right:-17px 和父级 overflow:hidden 隐藏此滚动条。例如here。无需设置固定宽度，也无需设置高度。

这是jQuery Scrollbar中使用的方式。隐藏水平滚动条比较复杂，需要处理内容变化来重新计算容器高度。

【讨论】：

滚动条在任何浏览器上总是 17px？

不幸的是，没有。它可以有不同的大小。此外，滚动条大小取决于当前页面缩放。

【参考方案5】：

我基本上将padding:0 1em 1em 0; 添加到它应该被隐藏的元素中，如果父级有溢出，这会隐藏两个滚动条：隐藏。调整padding-bottom 或只调整padding-right，如果它只隐藏其中一个。

1em 是大多数浏览器中滚动条的平均宽度： http://jsfiddle.net/5GCsJ/912/

【参考方案6】：

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

只需增加#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;

【参考方案7】：

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

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

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

【参考方案8】：

我用 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。

还请注意，scrollLeft() 可以设置动画......以获得更平滑的过渡。