如何用css控制浏览器滚动条-去百问

如何用css控制浏览器滚动条

的有关信息介绍如下：

如何用css控制浏览器滚动条

用CSS控制滚动条样式1,Overflow内容溢出时的设置overflow 水平及垂直方向内容溢出时的设置 overflow-x 水平方向内容溢出时的设置 overflow-y 垂直方向内容溢出时的设置以上三个属性设置的值为visible、scroll、hidden、autovisible 默认值。使用该值时，无论设置的"width"和"height"的值是多少，其中的内容无论是否超出范围都将被强制显示。 hidden 效果与visible相反。任何超出"width"和"height"的内容都会不可见。 scroll 无论内容是否超越范围，都将显示滚动条。 auto 当内容超出范围时，显示滚动条，否则不显示。应用:没有水平滚动条:

test没有垂直滚动条：

test没有滚动条：

test自动显示滚动条：

test2,自己定义滚动条的颜色我们一般默认的滚动条样式如下左图,右图是放大了1600倍的样子,我们可以看到滚动条有几种言责组合的,我给他们标了7个号,分别注释在下面的css代码的后面了,注意css的注释代码是放在两个斜杠内的两个星号之间,如:/*这里放注释的代码*/Body {scrollbar-arrow-color: #f4ae21; /*图6,三角箭头的颜色*/scrollbar-face-color: #333; /*图5,立体滚动条的颜色*/scrollbar-3dlight-color: #666; /*图1,立体滚动条亮边的颜色*/scrollbar-highlight-color: #666; /*图2,滚动条空白部分的颜色*/scrollbar-shadow-color: #999; /*图3,立体滚动条阴影的颜色*/scrollbar-darkshadow-color: #666; /*图4,立体滚动条强阴影的颜色*/scrollbar-track-color: #666; /*图7,立体滚动条背景颜色*/scrollbar-base-color:#f8f8f8; /*滚动条的基本颜色*/Cursor:url(mouse.cur); /*自定义个性鼠标*/}以上2项适用与、、

、<iframe></p>                        </div>
                        <div class="entry-footer clear">
                            <div class="entry-tags"><span class="tag-links">标签:css,滚动条,浏览器</span></div>
                        </div>
                    </article>
                    <div class="related-content"><span class="section-title">相关文章</span>
                        <ul class="clear">
                                                        <li class="hentry ht_grid_1_3">
                                <a class="thumbnail-link" href="/article/180627.html">
                                    <div class="thumbnail-wrap"><img src="/upload/images/2024/0823/f2285afc.png" alt="irulu x9平板电脑，重置系统以后浏览器打不开是什么原因"></div>
                                </a>
                                <div class="entry-title"><a href="/article/180627.html">irulu x9平板电脑，重置系统以后浏览器打不开是什么原因</a></div>
                                <div class="entry-meta">
                                    <span class="entry-date">2024-08-25 22:17</span>
                                    <span class="entry-views">阅读(601)</span>
                                </div>
                            </li>
                                                        <li class="hentry ht_grid_1_3">
                                <a class="thumbnail-link" href="/answer/178561.html">
                                    <div class="thumbnail-wrap"><img src="/upload/images/2024/0814/e36d0c64.png" alt="cssk,light什么意思?英文什么意思"></div>
                                </a>
                                <div class="entry-title"><a href="/answer/178561.html">cssk,light什么意思?英文什么意思</a></div>
                                <div class="entry-meta">
                                    <span class="entry-date">2024-08-24 11:50</span>
                                    <span class="entry-views">阅读(547)</span>
                                </div>
                            </li>
                                                        <li class="hentry ht_grid_1_3">
                                <a class="thumbnail-link" href="/life/175281.html">
                                    <div class="thumbnail-wrap"><img src="/upload/images/2024/0814/f764228a.jpg" alt="360浏览器为什么打不开QQ空间？"></div>
                                </a>
                                <div class="entry-title"><a href="/life/175281.html">360浏览器为什么打不开QQ空间？</a></div>
                                <div class="entry-meta">
                                    <span class="entry-date">2024-08-22 05:10</span>
                                    <span class="entry-views">阅读(557)</span>
                                </div>
                            </li>
                                                    </ul>
                    </div>
                    <div class="popular-content entry-related">
                        <div class="popular-loop">
                                                        <div class="hentry">
                                <div class="entry-title">
                                    <span class="post-num num-1">1</span>
                                    <a href="/article/174611.html">uc浏览器到最下面就自动加载下一页怎么办</a>
                                </div>
                                <div class="entry-meta"><span class="entry-views"><i class="fa fa-eye"></i> 612 阅读</span></div>
                            </div>
                                                        <div class="hentry">
                                <div class="entry-title">
                                    <span class="post-num num-2">2</span>
                                    <a href="/answer/172865.html">ie浏览器怎么升级</a>
                                </div>
                                <div class="entry-meta"><span class="entry-views"><i class="fa fa-eye"></i> 586 阅读</span></div>
                            </div>
                                                        <div class="hentry">
                                <div class="entry-title">
                                    <span class="post-num num-3">3</span>
                                    <a href="/answer/170291.html">怎么更改电脑的默认浏览器</a>
                                </div>
                                <div class="entry-meta"><span class="entry-views"><i class="fa fa-eye"></i> 591 阅读</span></div>
                            </div>
                                                        <div class="hentry">
                                <div class="entry-title">
                                    <span class="post-num num-4">4</span>
                                    <a href="/article/168929.html">2345浏览器的网址是什么</a>
                                </div>
                                <div class="entry-meta"><span class="entry-views"><i class="fa fa-eye"></i> 622 阅读</span></div>
                            </div>
                                                        <div class="hentry">
                                <div class="entry-title">
                                    <span class="post-num num-5">5</span>
                                    <a href="/answer/166283.html">遨游浏览器怎么样？</a>
                                </div>
                                <div class="entry-meta"><span class="entry-views"><i class="fa fa-eye"></i> 535 阅读</span></div>
                            </div>
                                                    </div>
                    </div>
                </main>
            </div>
        </div>
        <aside id="secondary" class="sidebar">
            <div class="widget widget_posts_thumbnail">
                <div class="widget-title"><span>大家喜欢的文章</span></div>
                <ul>
                                            <li class="clear">
                            <a href="/article/180144.html">
                                <div class="thumbnail-wrap"><img src="/upload/images/2024/0823/b12e800a.jpg" alt="郭广昌结过几次婚？"></div>
                            </a>
                            <div class="entry-wrap"><a href="/article/180144.html">郭广昌结过几次婚？</a>
                                <div class="entry-meta">2024-08-25 14:13</div>
                            </div>
                        </li>
                                            <li class="clear">
                            <a href="/article/168305.html">
                                <div class="thumbnail-wrap"><img src="/upload/images/2024/0728/e1cfa5bd.png" alt="荣耀手机属于华为吗？"></div>
                            </a>
                            <div class="entry-wrap"><a href="/article/168305.html">荣耀手机属于华为吗？</a>
                                <div class="entry-meta">2024-08-17 08:54</div>
                            </div>
                        </li>
                                            <li class="clear">
                            <a href="/article/194357.html">
                                <div class="thumbnail-wrap"><img src="/upload/images/2024/0824/89aebca7.jpg" alt="坦克的简介？"></div>
                            </a>
                            <div class="entry-wrap"><a href="/article/194357.html">坦克的简介？</a>
                                <div class="entry-meta">2024-09-08 03:49</div>
                            </div>
                        </li>
                                            <li class="clear">
                            <a href="/article/154655.html">
                                <div class="thumbnail-wrap"><img src="/upload/images/2024/0727/2ad74569.png" alt="申组词怎么组"></div>
                            </a>
                            <div class="entry-wrap"><a href="/article/154655.html">申组词怎么组</a>
                                <div class="entry-meta">2024-08-07 06:51</div>
                            </div>
                        </li>
                                            <li class="clear">
                            <a href="/article/100528.html">
                                <div class="thumbnail-wrap"><img src="/upload/images/2024/0509/c3713389.jpg" alt="戴尔笔记本电脑的保修期是多久？"></div>
                            </a>
                            <div class="entry-wrap"><a href="/article/100528.html">戴尔笔记本电脑的保修期是多久？</a>
                                <div class="entry-meta">2024-05-12 05:16</div>
                            </div>
                        </li>
                                            <li class="clear">
                            <a href="/article/168547.html">
                                <div class="thumbnail-wrap"><img src="/upload/images/2024/0728/ecb1cec4.png" alt="雀部首是什么偏旁"></div>
                            </a>
                            <div class="entry-wrap"><a href="/article/168547.html">雀部首是什么偏旁</a>
                                <div class="entry-meta">2024-08-17 12:56</div>
                            </div>
                        </li>
                                            <li class="clear">
                            <a href="/article/101978.html">
                                <div class="thumbnail-wrap"><img src="/upload/images/2024/0509/66752a1c.png" alt="mac版本的阿里旺旺不能登陆！！"></div>
                            </a>
                            <div class="entry-wrap"><a href="/article/101978.html">mac版本的阿里旺旺不能登陆！！</a>
                                <div class="entry-meta">2024-05-18 06:17</div>
                            </div>
                        </li>
                                            <li class="clear">
                            <a href="/article/112301.html">
                                <div class="thumbnail-wrap"><img src="/upload/images/2024/0606/3134cad0.jpg" alt="《银河护卫队2》星爵父亲什么来头博希莱的父亲是什么来头？"></div>
                            </a>
                            <div class="entry-wrap"><a href="/article/112301.html">《银河护卫队2》星爵父亲什么来头博希莱的父亲是什么来头？</a>
                                <div class="entry-meta">2024-06-17 09:35</div>
                            </div>
                        </li>
                                    </ul>
            </div>
            <div class="widget widget_posts_thumbnail">
                <div class="widget-title"><span>近期发布的文章</span></div>
                <ul>
                                            <li class="clear">
                            <a href="/article/181371.html">
                                <div class="thumbnail-wrap"><img src="/upload/images/2024/0823/8de33dc5.png" alt="PSP上的雪之少女（Kanon）有汉化吗？"></div>
                            </a>
                            <div class="entry-wrap"><a href="/article/181371.html">PSP上的雪之少女（Kanon）有汉化吗？</a>
                                <div class="entry-meta">2024-08-26 10:40</div>
                            </div>
                        </li>
                                            <li class="clear">
                            <a href="/article/181374.html">
                                <div class="thumbnail-wrap"><img src="/upload/images/2024/0823/c95e9129.png" alt="金山毒霸真的是永久免费？？ 是嘛？"></div>
                            </a>
                            <div class="entry-wrap"><a href="/article/181374.html">金山毒霸真的是永久免费？？ 是嘛？</a>
                                <div class="entry-meta">2024-08-26 10:44</div>
                            </div>
                        </li>
                                            <li class="clear">
                            <a href="/article/181364.html">
                                <div class="thumbnail-wrap"><img src="/upload/images/2024/0823/c1c90ebc.png" alt="请问谁知道这批郑州城中村改造的名单？"></div>
                            </a>
                            <div class="entry-wrap"><a href="/article/181364.html">请问谁知道这批郑州城中村改造的名单？</a>
                                <div class="entry-meta">2024-08-26 10:34</div>
                            </div>
                        </li>
                                            <li class="clear">
                            <a href="/article/181360.html">
                                <div class="thumbnail-wrap"><img src="/upload/images/2024/0823/db932efd.png" alt="川藏线上遇害的女孩魏茵（如何行走川藏的小建议）"></div>
                            </a>
                            <div class="entry-wrap"><a href="/article/181360.html">川藏线上遇害的女孩魏茵（如何行走川藏的小建议）</a>
                                <div class="entry-meta">2024-08-26 10:29</div>
                            </div>
                        </li>
                                            <li class="clear">
                            <a href="/article/181354.html">
                                <div class="thumbnail-wrap"><img src="/upload/images/2024/0823/bcbfb314.jpg" alt="ipad10tv是什么？"></div>
                            </a>
                            <div class="entry-wrap"><a href="/article/181354.html">ipad10tv是什么？</a>
                                <div class="entry-meta">2024-08-26 10:24</div>
                            </div>
                        </li>
                                            <li class="clear">
                            <a href="/article/181353.html">
                                <div class="thumbnail-wrap"><img src="/upload/images/2024/0823/1f6021ef.png" alt="我对女朋友够好了，她说做点实际的，这是什么意思"></div>
                            </a>
                            <div class="entry-wrap"><a href="/article/181353.html">我对女朋友够好了，她说做点实际的，这是什么意思</a>
                                <div class="entry-meta">2024-08-26 10:23</div>
                            </div>
                        </li>
                                            <li class="clear">
                            <a href="/article/181352.html">
                                <div class="thumbnail-wrap"><img src="/upload/images/2024/0823/b023ae48.png" alt="想做一份兼职日语翻译"></div>
                            </a>
                            <div class="entry-wrap"><a href="/article/181352.html">想做一份兼职日语翻译</a>
                                <div class="entry-meta">2024-08-26 10:21</div>
                            </div>
                        </li>
                                            <li class="clear">
                            <a href="/article/181349.html">
                                <div class="thumbnail-wrap"><img src="/upload/images/2024/0823/52347c26.jpg" alt="印度山洪暴发或致100多人死亡？"></div>
                            </a>
                            <div class="entry-wrap"><a href="/article/181349.html">印度山洪暴发或致100多人死亡？</a>
                                <div class="entry-meta">2024-08-26 10:18</div>
                            </div>
                        </li>
                                    </ul>
            </div>
        </aside>
    </div>
    <footer id="colophon" class="site-footer">
        <div id="site-bottom" class="clear">
            <div class="container">
                <div class="site-info"><a href="/sitemap.xml">网站地图</a> - <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">闽ICP备2023002985号-5</a> - 联系邮箱：1465333496@qq.com
                </div>
            </div>
        </div>
    </footer>
</div>
<div id="back-top" style="display: none;">
    <a href="#top" title="返回顶部"><span class="genericon genericon-collapse"></span></a>
</div>
<script>(function ($) {
    $(document).ready(function () {
        "use strict";
        $('#primary-menu').slicknav({
            prependTo: '#slick-mobile-menu',
            allowParentLinks: true,
            label: '导航'
        });
    });
})(jQuery);</script>
<script defer="" src="/themes/simpleboot3/static/js/autoptimize.js"></script>
</body>
</html>