Hide scrollbar for scrollable div

Question

I am working on a HTML 5 app so there is no fix height. I want to make my div scrollable, but the scrollbar should not visible. Is there any way to achieve this?

HTML:

<!DOCTYPE html>
<html>
<body>
    <div id="chatlist" class="mousescroll gridcontainer">
        <ul>
            <li>Aug 19, 2011 - Here is an update to Stephen P.'s post to have a styled scroll bar.  -Mike ... You set the overflow to none normally and ...</li>
            <li>Aug 19, 2011 - Here is an update to Stephen P.'s post to have a styled scroll bar.  -Mike ... You set the overflow to none normally and ...</li>
            <li>Aug 19, 2011 - Here is an update to Stephen P.'s post to have a styled scroll bar.  -Mike ... You set the overflow to none normally and ...</li>
            <li>Aug 19, 2011 - Here is an update to Stephen P.'s post to have a styled scroll bar.  -Mike ... You set the overflow to none normally and ...</li>
            <li>Aug 19, 2011 - Here is an update to Stephen P.'s post to have a styled scroll bar.  -Mike ... You set the overflow to none normally and ...</li>
            <li>Aug 19, 2011 - Here is an update to Stephen P.'s post to have a styled scroll bar.  -Mike ... You set the overflow to none normally and ...</li>
            <li>Aug 19, 2011 - Here is an update to Stephen P.'s post to have a styled scroll bar.  -Mike ... You set the overflow to none normally and ...</li>
            <li>Aug 19, 2011 - Here is an update to Stephen P.'s post to have a styled scroll bar.  -Mike ... You set the overflow to none normally and ...</li>
            <li>Aug 19, 2011 - Here is an update to Stephen P.'s post to have a styled scroll bar.  -Mike ... You set the overflow to none normally and ...</li>
            <li>Aug 19, 2011 - Here is an update to Stephen P.'s post to have a styled scroll bar.  -Mike ... You set the overflow to none normally and ...</li>
            <li>Aug 19, 2011 - Here is an update to Stephen P.'s post to have a styled scroll bar.  -Mike ... You set the overflow to none normally and ...</li>
            <li>Aug 19, 2011 - Here is an update to Stephen P.'s post to have a styled scroll bar.  -Mike ... You set the overflow to none normally and ...</li>
            <li>Aug 19, 2011 - Here is an update to Stephen P.'s post to have a styled scroll bar.  -Mike ... You set the overflow to none normally and ...</li>
            <li>Aug 19, 2011 - Here is an update to Stephen P.'s post to have a styled scroll bar.  -Mike ... You set the overflow to none normally and ...</li>
            <li>Aug 19, 2011 - Here is an update to Stephen P.'s post to have a styled scroll bar.  -Mike ... You set the overflow to none normally and ...</li>
            <li>Aug 19, 2011 - Here is an update to Stephen P.'s post to have a styled scroll bar.  -Mike ... You set the overflow to none normally and ...</li>
            <li>Aug 19, 2011 - Here is an update to Stephen P.'s post to have a styled scroll bar.  -Mike ... You set the overflow to none normally and ...</li>
            <li>Aug 19, 2011 - Here is an update to Stephen P.'s post to have a styled scroll bar.  -Mike ... You set the overflow to none normally and ...</li>
            <li>Aug 19, 2011 - Here is an update to Stephen P.'s post to have a styled scroll bar.  -Mike ... You set the overflow to none normally and ...</li>
            <li>Aug 19, 2011 - Here is an update to Stephen P.'s post to have a styled scroll bar.  -Mike ... You set the overflow to none normally and ...</li>
            <li>Aug 19, 2011 - Here is an update to Stephen P.'s post to have a styled scroll bar.  -Mike ... You set the overflow to none normally and ...</li>
            <li>Aug 19, 2011 - Here is an update to Stephen P.'s post to have a styled scroll bar.  -Mike ... You set the overflow to none normally and ...</li>
            <li>Aug 19, 2011 - Here is an update to Stephen P.'s post to have a styled scroll bar.  -Mike ... You set the overflow to none normally and ...</li>
            <li>Aug 19, 2011 - Here is an update to Stephen P.'s post to have a styled scroll bar.  -Mike ... You set the overflow to none normally and ...</li>

        </ul>
    </div>
</body>
</html>

CSS:

<style>
    .gridcontainer {
      position: absolute;
      top: 0; bottom: 0; left: 0; right: 0;
      overflow: auto;
    }
        div#chatlist {
        /**width: 50px;
        height: 540px;**/
        border: 1px solid black;
    }
    div.mousescroll {
        overflow: hidden;
    }
    div.mousescroll:hover {
        overflow-y: scroll;
    }
    ul {
        list-style-type: none;
        padding-left: 10px;
        padding-right: 10px;
    }
    .slimScrollDiv { border: 1px solid #ccc; margin:10px; }
    li {
        margin-bottom:20px;
    }
</style>

Javascript :

<script>
(function($) {

    jQuery.fn.extend({
        slimScroll: function(o) {

            var ops = o;
            //do it for every element that matches selector
            this.each(function(){

            var isOverPanel, isOverBar, isDragg, queueHide, barHeight,
                divS = '<div></div>',
                minBarHeight = 30,
                wheelStep = 30,
                o = ops || {},
                cwidth = o.width || 'auto',
                cheight = o.height || '250px',
                size = o.size || '7px',
                color = o.color || '#000',
                position = o.position || 'right',
                opacity = o.opacity || .4,
                alwaysVisible = o.alwaysVisible === true;

                //used in event handlers and for better minification
                var me = $(this);

                //wrap content
                var wrapper = $(divS).css({
                    position: 'relative',
                    overflow: 'hidden',
                    width: cwidth,
                    height: cheight
                }).attr({ 'class': 'slimScrollDiv' });

                //update style for the div
                me.css({
                    overflow: 'hidden',
                    width: cwidth,
                    height: cheight
                });

                //create scrollbar rail
                var rail  = $(divS).css({
                    width: '15px',
                    height: '100%',
                    position: 'absolute',
                    top: 0
                });

                //create scrollbar
                var bar = $(divS).attr({ 
                    'class': 'slimScrollBar ', 
                    style: 'border-radius: ' + size 
                    }).css({
                        background: color,
                        width: size,
                        position: 'absolute',
                        top: 0,
                        opacity: opacity,
                        display: alwaysVisible ? 'block' : 'none',
                        BorderRadius: size,
                        MozBorderRadius: size,
                        WebkitBorderRadius: size,
                        zIndex: 99
                });

                //set position
                var posCss = (position == 'right') ? { right: '1px' } : { left: '1px' };
                rail.css(posCss);
                bar.css(posCss);

                //wrap it
                me.wrap(wrapper);

                //append to parent div
                me.parent().append(bar);
                me.parent().append(rail);

                //make it draggable
                bar.draggable({ 
                    axis: 'y', 
                    containment: 'parent',
                    start: function() { isDragg = true; },
                    stop: function() { isDragg = false; hideBar(); },
                    drag: function(e) 
                    { 
                        //scroll content
                        scrollContent(0, $(this).position().top, false);
                    }
                });

                //on rail over
                rail.hover(function(){
                    showBar();
                }, function(){
                    hideBar();
                });

                //on bar over
                bar.hover(function(){
                    isOverBar = true;
                }, function(){
                    isOverBar = false;
                });

                //show on parent mouseover
                me.hover(function(){
                    isOverPanel = true;
                    showBar();
                    hideBar();
                }, function(){
                    isOverPanel = false;
                    hideBar();
                });

                var _onWheel = function(e)
                {
                    //use mouse wheel only when mouse is over
                    if (!isOverPanel) { return; }

                    var e = e || window.event;

                    var delta = 0;
                    if (e.wheelDelta) { delta = -e.wheelDelta/120; }
                    if (e.detail) { delta = e.detail / 3; }

                    //scroll content
                    scrollContent(0, delta, true);

                    //stop window scroll
                    if (e.preventDefault) { e.preventDefault(); }
                    e.returnValue = false;
                }

                var scrollContent = function(x, y, isWheel)
                {
                    var delta = y;

                    if (isWheel)
                    {
                        //move bar with mouse wheel
                        delta = bar.position().top + y * wheelStep;

                        //move bar, make sure it doesn't go out
                        delta = Math.max(delta, 0);
                        var maxTop = me.outerHeight() - bar.outerHeight();
                        delta = Math.min(delta, maxTop);

                        //scroll the scrollbar
                        bar.css({ top: delta + 'px' });
                    }

                    //calculate actual scroll amount
                    percentScroll = parseInt(bar.position().top) / (me.outerHeight() - bar.outerHeight());
                    delta = percentScroll * (me[0].scrollHeight - me.outerHeight());

                    //scroll content
                    me.scrollTop(delta);

                    //ensure bar is visible
                    showBar();
                }

                var attachWheel = function()
                {
                    if (window.addEventListener)
                    {
                        this.addEventListener('DOMMouseScroll', _onWheel, false );
                        this.addEventListener('mousewheel', _onWheel, false );
                    } 
                    else
                    {
                        document.attachEvent("onmousewheel", _onWheel)
                    }
                }

                //attach scroll events
                attachWheel();

                var getBarHeight = function()
                {
                    //calculate scrollbar height and make sure it is not too small
                    barHeight = Math.max((me.outerHeight() / me[0].scrollHeight) * me.outerHeight(), minBarHeight);
                    bar.css({ height: barHeight + 'px' });
                }

                //set up initial height
                getBarHeight();

                var showBar = function()
                {
                    //recalculate bar height
                    getBarHeight();
                    clearTimeout(queueHide);

                    //show only when required
                    if(barHeight >= me.outerHeight()) {
                        return;
                    }
                    bar.fadeIn('fast');
                }

                var hideBar = function()
                {
                    //only hide when options allow it
                    if (!alwaysVisible)
                    {
                        queueHide = setTimeout(function(){
                            if (!isOverBar && !isDragg) { bar.fadeOut('slow'); }
                        }, 1000);
                    }
                }

            });

            //maintain chainability
            return this;
        }
    });

    jQuery.fn.extend({
        slimscroll: jQuery.fn.slimScroll
    });

})(jQuery);


//invalid name call
              $('#chatlist').slimscroll({
                  color: '#00f',
                  size: '10px',
                  width: '50px',
                  height: '150px'                  
              });
</script>

How will the user scroll, then? You're assuming everyone has mice wheels or everyone's trackpads support scrolling. This isn't the case. Which is why it's an OS feature and not usually overridden by websites. Either way, here's how it's done: http://css-tricks.com/custom-scrollbars-in-webkit/ — casraf, Apr 17 '14 at 11:40
possible duplicate of [How to disable browser or element scrollbar, but allow scrolling with wheel or arrow keys?](http://stackoverflow.com/questions/1326570/how-to-disable-browser-or-element-scrollbar-but-allow-scrolling-with-wheel-or-a) — TripeHound, Apr 17 '14 at 11:46

score 4 · Answer 1 · answered Oct 10 '14 at 13:03

I am too late for this question but just add following sentence to css will make your scroll bar hidden

.element::-webkit-scrollbar { width: 0 !important }

where .element is a class of the div which has scroll bar

you can find more about this on http://blogs.msdn.com/b/kurlak/archive/2013/11/03/hiding-vertical-scrollbars-with-pure-css-in-chrome-ie-6-firefox-opera-and-safari.aspx

score 3 · Answer 2 · edited Apr 17 '14 at 12:09

3

CSS only solution

<div id="container"> <--your code goes here--> </div>

DEMO

#container{
    height: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
}

#chatlist{
    width: 100% !important;
    height: 99% !important;
    overflow: auto !important;
    padding-right: 15px !important;
}

html, body{
    height: 99% !important;
    border: 1px solid red;
    overflow:hidden !important;
}

edited Apr 17 '14 at 12:09

JF it

2,403
3
20
30

answered Apr 17 '14 at 11:42

4dgaurav

11,360
4
32
59

we ca't put any padding from left or right because app design is wall to wall there is no space. ...thanks – user2990762 Apr 17 '14 at 11:56
Then remove it, it serves your purpose even after that..:) – 4dgaurav Apr 17 '14 at 11:59
but after removing padding-right it shows the scroll bar . – user2990762 Apr 17 '14 at 12:03

score 1 · Answer 3 · answered Apr 17 '14 at 11:40

1

Demo Fiddle

Why not contain the scrollable element and push the scrollbar out of view? At some point the container will need its height constrained however.

#chatlist {
    width: 500px;
    height: 300px;
    border: 1px solid black;
    overflow: hidden;
}
#chatlist ul {
    height: 100%;
    width: 520px;
    overflow-y: scroll;
}

answered Apr 17 '14 at 11:40

SW4

69,876
20
132
137

i can't put any height on #chatlist because there is no limit of list given. – user2990762 Apr 17 '14 at 11:54
Just wrap whatever element is scrolling within a container and set its width to greater than that container. – SW4 Apr 17 '14 at 12:41

score 1 · Answer 4 · answered Apr 17 '14 at 14:21

You can try jQuery Scrollbar which uses native scrollbar that are hidden with negative margins. Scrollbars are fully CSS customizable, so you can just hide them with display:none if you don't need them visible. Mouse wheel scroll, trackpads and touch scroll will continue working.

Hide scrollbar for scrollable div

4 Answers4

Demo Fiddle