13

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!

Community
  • 1
  • 1
Maximus S
  • 10,759
  • 19
  • 75
  • 154
  • You might consider looking at a plugin such as [jscrollpane](http://jscrollpane.kelvinluck.com/). At the very least you can find out what that code does and reproduce the parts you want to keep – drew_w Apr 25 '14 at 13:16
  • Im confused? Just use the code from that over question. [DEMO](http://jsfiddle.net/Ruddy/5GCsJ/878/) so like this? – Ruddy Apr 25 '14 at 13:19
  • Maybe I am missing the point, but why do you even need it? What is this `$.scrollTo()` you can still use the `dom.scrollLeft` and `dom.scrollTop` in vanilla JS, with `overflow: hidden;` [as shown in the example](http://jsfiddle.net/5GCsJ/881/) – Idra Apr 25 '14 at 13:35
  • Hi @drew_w thanks so much for helping me. I updated the question to better explain why I am having troubles. – Maximus S Apr 26 '14 at 02:07
  • @MaximusS No answer to your question, but just a note: What you are going to do is a very bad idea from the usability point of view! Users are used to recognize scrollable content by scrollbars. And without JS your content is unreachable. So I would not recommend to do such things. – Netsurfer Apr 28 '14 at 09:22
  • Hi @Netsurfer Thank you for your input. I am also considering moving away from this design. I am just curious how I can resolve this problem in case I face the same situation in future :) – Maximus S Apr 29 '14 at 01:19
  • I did this crudely with jQuery in jsfiddle, http://jsfiddle.net/5GCsJ/942/ – droplet May 04 '14 at 18:54

8 Answers8

13

Theory :

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

Hide scollbar

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
    /*
}
web-tiki
  • 99,765
  • 32
  • 217
  • 249
  • 1
    this does not work once you go mobile (they have different scroller sizes). Gotta go the js route. – Ced Dec 27 '16 at 01:26
4

scollbars take up around 20px so just make you scrollable div 20px taller and 20px wider and your scrollbars will be hidden:

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

Example

Pete
  • 57,112
  • 28
  • 117
  • 166
3

It's kind of cheating but could you hide it behind the #content like this DEMO

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

#item-container {
    width: 1500px;
    height: 500px;
    overflow: scroll;
}
Niklas
  • 13,005
  • 23
  • 79
  • 119
3

If you know all containers that can be scrollable, you can hide scrollbar with CSS and a little bit of JS. For webkit-based browsers (safari, google chrome, opera) it will be CSS-only solution to set scrollbar width to 0. For IE, Firefox and other non-webkit browsers you should calculate scrollbar width that will be used as negative margin-right for you scrollable content.

To do so you should wrap your content into div with overflow-y:scroll to always show vertical scrollbar and hide this scrollbar with margin-right:-17px and parent overflow:hidden. Example is here. No need to set fixed width, nor height.

This is the way that used in jQuery Scrollbar. Hiding horizontal scrollbar is more complicated and requires to handle content changes to recalculate container height.

Gromo
  • 1,609
  • 1
  • 13
  • 14
2

I basicly add padding:0 1em 1em 0; to the element where it is supposed to be hidden , this hides both scrollbars if parent has overflow: hidden. tune padding-bottom or only padding-right, if it is to hide only one of them.

1em is average width of scroll bars in most browsers : http://jsfiddle.net/5GCsJ/912/

G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
2

The solution to make the content itself with horizontal scroll.

Just increase the height of #main, and #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;
}
Samuraik
  • 79
  • 4
1
  1. Use a script to create custom scrollbars.

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

  1. Then use CSS(or modify script or change script config) to hide the custom scrollbars.
Pawel
  • 16,093
  • 5
  • 70
  • 73
0

I did this crudely using jQuery and your example

Check this fiddle:

I simply detected the direction of the scroll-wheel and pushed the horiz-scroll bar with 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);
        }
    });
});

It is "crude" because I hard-coded some values like the 500px amount to scroll, you could write some more javascript to detect dynamically how much to scroll. Plus I don't know if the wheelDelta value will be +120 for up and -120 for down, for you and other users.

Also note that the scrolLeft() can be animated.. for smoother transitions.

droplet
  • 286
  • 4
  • 13