怎样隐藏横向滚动条

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了怎样隐藏横向滚动条相关的知识,希望对你有一定的参考价值。

参考技术A

1、打开Excel表格文件后点击也买你上的文件选项。

2、在弹出来的页面总点击选项按键。

3、点击弹出来的页面中的高级选项,进入高级设置页面。

4、将页面中的显示水平滚动条前面的勾选去除,即可将页面中的水平滚动条除去。

HTML横向滚动条和文本超出显示三个小圆点

 我们这次要说的就是:现在有很多的公司以及很多的app软件经常使用的两个方法横向滚动条文本超出三个小圆点

横向滚动条:顾名思义嘛,就是能够一块内容可以横着滑动.

文本超出三个小圆点:文本超出就是当文本的内容超出了我们的所定的盒子宽度,我们将多余的文本隐藏替换成i小圆点进行显示.

自己刚才写了一个简单横向滚动条的例子,我们看一下代码

html部分:

 
<div class="top">
     <div class="box_top">
            <span>1111</span>
            <span>1111</span>
            <span>1111</span>
            <span>1111</span>
            <span>1111</span>
            <span>1111</span>
            <span>1111</span>
            <span>1111</span>
            <span>1111</span>
            <span>1111</span>
            <span>1111</span>
            <span>1111</span> 
            <span>1111</span>
            <span>1111</span>
            <span>1111</span>
     </div>
</div>    
 

 

css部分:

 
.box_top{
                width: 100%;
                height: 2rem;
                background: green;
                padding-left: 0.3rem;
                padding-right: 0.3rem;
                box-sizing: border-box;
                overflow-x: auto;
                white-space:nowrap;
            }
            .box_top span{
                background: pink;
                display: inline-block;
                width: 1rem;
                height: 2rem;
                text-align: center;
                vertical-align: middle;
            }
 

其实横向滚动条的原理非常的简单就是给外层的盒子一个固定的宽度,当盒子中的内容超过了盒子的宽度就让其出现滚动条就可以了 我们要注意关键的几点 :

1、第一点就是我们一定要在给外层的盒子设置css样式的时候要设置如果超出了的话如何显示滚动条就是overflow-x(x轴显示滚动条)overflow-y(y轴显示滚动条)必须要搞清楚自己需要显示怎样的滚动条。

2、第二点就是我们必须要让盒子的内容在一行显示,不要让内容折行,这些上面的css样式中都有,不让内容折行是white-space:nowrap,内容在一行显示text-align: center。

3、超出后显示滚动滚动可以使用overflow: auto也可以使用overflow: scroll

下面我们看一下文本超出显示三个小圆点的例子:

技术图片

我给li定义了固定的宽度只要超出后就会显示三个小圆点,在css样式中也加上了注释,非常的清晰。

这样我们就完成了横向滚动条和文本超出显示三个小圆点这两个功能。

最后:诚挚的希望此文章能够帮助到正在观看的你,如有不理解或者有漏洞可以在评论中进行交流谢谢。

 

以上是关于怎样隐藏横向滚动条的主要内容,如果未能解决你的问题,请参考以下文章

怎么用CSS给html加横向滚动条并且隐藏竖向滚动条

怎样去掉CWebBrowser2空间显示网页的滚动条

怎么用CSS给html加横向滚动条并且隐藏竖向滚动条

ie 隐藏横向滚动条(overflow-x:hidden;)后,纵滚动条div内容被挡住.试了好多方法都不行,求指教

浏览器页面出现横向滚动条

为啥浏览器访问空间时横向滚动条没了