logo标签列表

隐藏可滚动div的滚动条

javascriptjquerycsshtml
3

我正在开发一个HTML5应用，所以没有固定的高度。我想让我的

可滚动，但是滚动条不应该可见。有没有办法实现这一点？

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>
用户怎么滚动呢？你假设每个人都有鼠标滚轮或者每个人的触摸板都支持滚动，但事实并非如此。这就是为什么滚动是操作系统的功能，通常不会被网站覆盖。无论如何，下面是具体操作方法：http://css-tricks.com/custom-scrollbars-in-webkit/ - casraf
可能是重复的问题：如何禁用浏览器或元素滚动条，但允许使用鼠标滚轮或箭头键进行滚动？ - TripeHound
您忘记加载jQuery。 - Rohan Kumar
4个回答
4
3

仅使用CSS的解决方案

<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;
}
我们不能在左侧或右侧添加任何填充，因为应用程序设计是墙壁到墙壁的，没有空间。谢谢。 - user2990762
然后将其删除，即使在此之后它仍能满足您的需求.. :) - 4dgaurav
但是在去掉padding-right之后，它会显示滚动条。 - user2990762
1

演示 Fiddle

为什么不将可滚动元素包含起来并将滚动条推出视图？但是，在某些情况下，容器需要受到高度限制。

#chatlist {
    width: 500px;
    height: 300px;
    border: 1px solid black;
    overflow: hidden;
}
#chatlist ul {
    height: 100%;
    width: 520px;
    overflow-y: scroll;
}
我无法在 #chatlist 上设置任何高度，因为没有给出列表的限制。 - user2990762
只需将滚动的任何元素包装在容器内，并将其宽度设置为大于该容器即可。 - SW4
1
你可以尝试使用jQuery滚动条，它使用本地滚动条，并通过负边距隐藏。滚动条完全可自定义CSS，因此您可以使用display:none将其隐藏，如果您不需要它们可见。鼠标滚轮滚动、触摸板和触摸滚动仍将继续工作。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接