隐藏嵌套 div 的滚动条，但仍使其可滚动 [英] Hide scroll bar of nested div, but still make it scrollable

查看：21
本文介绍了隐藏嵌套 div 的滚动条，但仍使其可滚动的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

这个是我用过的参考，它解释了如何在隐藏滚动条的情况下使 div 可滚动.唯一的区别是我嵌套了 div.检查我的 fiddle

HTML:

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

CSS:

#main {宽度:500px；高度:500px；}#子主{宽度:500px；高度:500px；溢出:隐藏；}#内容 {背景颜色:红色；宽度:500px；高度:500px；溢出:自动；}#项目容器{宽度:1500px；高度:500px；}.物品 {宽度:500px；高度:500px；字体大小:25em；文本对齐:居中；向左飘浮;}

像上面一样，我有一个溢出的水平 div，我想隐藏它的滚动条.我必须让它仍然可滚动，因为 $.scrollTo() 否则将无法工作.

更新:

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

  1. 当我将 overflow: hidden 设置为可滚动项的父容器时，我无法滚动(原生 javascript 滚动功能也不起作用).
  2. 我只想滚动溢出的容器，而不是整个窗口.这可以通过在 $.localScroll({ target: '#projects-content' }) 中设置目标来完成，但是当我设置目标时没有任何滚动.如果我不这样做，只要 overflow:hidden 没有应用，滚动就会起作用.同样，任何帮助将不胜感激.

HTML:

<!-- 整个项目页面的开始--><div id="项目侧边栏"><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 id="项目内容"><!-- 这必须是可滚动项目的容器，而不是整个窗口 --><div id="project-first" class="project-item"><!-- 这些项目应该是可滚动的--><div class="project-subitem" id="first-sub1"><a href='#first-sub2' class='next'>next</a>

<div class='project-subitem' id='first-sub2'><a href='#first-sub1' class='prev'>prev</a>

<!-- 可滚动项目结束-->

<!-- 滚动滚动容器结束 -->

<!-- 整个项目页面结束--><脚本>//FIXME:当我设置目标时，没有任何滚动.//但我不希望整个窗口滚动$('#projects').localScroll({//目标:'#project-content',哈希:假});

CSS

#project-content {宽度:80%；高度:100%；位置:相对；向左飘浮;}#project-sidebar {向左飘浮;宽度:20%；高度:100%；}.project-item {宽度:300%；高度:100%；}.project-subitem {高度:100%；宽度:33.33%；位置:相对；向左飘浮;}

更新:

在我将 overflow:scroll 添加到 #project-content 后，滚动按预期工作.我现在需要的只是让 #project-content 中的滚动条消失.我尝试将 overflow:hidden 添加到其父级，但没有成功.我也尝试将其添加到 html, body，但随后整个文档拒绝接受任何滚动功能，例如 scrollTop().

任何帮助将不胜感激！

解决方案

理论:

该技术是使用比带有滚动条的子元素短的父容器.这张图片显示了我的意思:

练习:

在您的情况下，我建议在 #project-content 上使用绝对定位和负底值，这样它就会溢出底部的父容器 (#projects).

现在的重点是什么负值?它应该与滚动的值相同 但是 根据浏览器的不同，滚动条的宽度永远不会相同.所以我建议给一个更大的值:-30px 以确保它是隐藏的.您只需要注意不要让内容靠近底部，这些内容可以隐藏在带有细滚动条的浏览器中.

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

#projects{位置:相对；}#项目内容{位置:绝对；顶部:0；左:20%；底部:-30px；/* 消除:高度:100%；位置:相对；向左飘浮;填充底部:-15px/*}

This is a reference that I used, which explains how to make a div scrollable with its scroll bar hidden. The only difference is that I have nested divs. Check my 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;
}

Like above, I have a overflowed horizontal div and I want to hide its scroll bar. I have to make it still scrollable because $.scrollTo() wouldn't work otherwise.

UPDATE:

I have read all the answers, but I still have not resolved my problem and don't know what's causing it. This is the live that's having troubles. Basically, I am trying to follow this almost exactly the same, but there must be some reason that my website isn't working as expected. There are two problems.

  1. When I set overflow: hidden to a parent container of scrollable items, I cannot scroll (native javascript scroll functions do not work too).
  2. I want to scroll just the overflowed container, not the entire window. This can be done by setting a target in $.localScroll({ target: '#projects-content' }) but nothing scrolls when I set the target. If I don't, scrolling works as long as overflow:hidden is not applied. Again, any help would be greatly appreciated.

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:

After I added overflow:scroll to #project-content, the scrolling works as expected. All I need now is making scroll bars disappear in #project-content. I tried adding overflow:hidden to its parent but had no success. I also tried adding it to html, body, but then the entire document refuses to accept any scrolling functions like scrollTop().

Any help will be greatly appreciated!

解决方案

Theory :

The technique is to use a parent container that is shorter than the child element with scrollbar. This image shows what I mean :

Practice :

In your case, I suggest using absolute positionning and negative bottom value on #project-content so it overflows it's parent container (#projects) at the bottom.

The point is now what negative value? It should be the same value as the with of a scroll but scrollbars are never the same width according to browsers. So I suggest giving a bigger value : -30pxto be sure it is hidden. You will just need to be carefull that you don't have content to close to the bottom that can be hidden on browesers with thin scrollbars.

This is the CSS you should add to your website :

#projects{
    position: relative;
}

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

这篇关于隐藏嵌套 div 的滚动条，但仍使其可滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆