正文

css-(左右滑动时，隐藏底部滚动条)

Lafitewu  2022-02-11  414

关键词：

先上效果图，如下：

是不是经常看到此类效果？

这里如果不借用其它框架，单纯的利用css 来实现怎么做呢？

1.这一看就要用到overflow，但是用它会有一个默认的滚动条；

2.那么重点来了，怎么解决这个问题呢？

3.用 ::-webkit-scrollbar 就可以很好地解决。

代码如下：

css

* {
        padding: 0;
        margin: 0; 
    } 
    .nav {
        position: fixed;
        top: 0;
        background: white;
        width: 100%;
        height: 30px;
        overflow-x: auto;
    }
    .nav::-webkit-scrollbar {
        display: none;
    }
        .nav ul {
            width: 200%;
            height: 100%;
        }
            .nav ul li {
                float: left;
                list-style: none;
                width: 10%;
                height: 100%;
                text-align: center;
                line-height: 30px;
            }

html:

<div class="nav">
    <ul>
        <li>头条</li>
        <li>新闻</li>
        <li>搞笑</li>
        <li>视频</li>
            <li>动漫</li>
        <li>科技</li>
        <li>农业</li>
        <li>社会</li>
        <li>人文</li>
    </ul>
</div>

好，大功告成。

弹出框滑动，底部不跟着滑动

弹出框里有滚动条，并且页面也有滚动条时，在弹出框内滑动时底部页面也会跟着滑动，试了下当弹出框出现时加上$(‘body‘).css({‘height‘,‘100%‘,‘overflow‘,‘hidden‘});不起作用，后来在弹出框上加上以下代码便起作用了。$(... 查看详情

css隐藏滚动条并且可以滑动

比如有一个div css代码： div{scrollbar-face-color:transparent;scrollbar-arrow-color:transparent;scrollbar-track-color:transparent;scrollbar-3dlight-color:transparent;}div::-webkit-scrollbar{dis 查看详情

内层盒子滚动条滑动到底部会滑动外层滚动条解决方法

...取禁止滚动条的方式。因为内层盒子滑到最底部就会开始滑动外层盒子的滚动条解决方案不然内层滚动条滚动到最底部测试兼容ie8+谷歌OK（其它浏览器没有测试）<styletype="text/css">.mainoverflow:auto;width:400px;height:400px;bor... 查看详情

table左边固定-底部横向滚动条

...，横空霹雳出了，此款：table表单左边固定，底部滚动条左右滑动展现数据demo。原理很简单：在table外面嵌套一层div，并且设置此父div{overflow:auto;}.此举为了出席横向滚动条对里面的tr设置{position:r 查看详情

页面滚动条滑动至底部加载信息

$(window).scroll(function() var scrollTop = $(this).scrollTop(); //滚动条距离顶部的高度 var scrollHeight = $(document).height(); 查看详情

移动端遮罩层滚动时，禁止底部滑动

参考文章关键css：body.modal-openposition:fixed;width:100%;关键js://解决移动端弹出层滚动穿透问题varModalHelper=(function(bodyCls)varscrollTop;returnafterOpen:function()scrollTop=document.scrollingElement.scrol 查看详情

清除底部滑动条

使用overflow属性来去除底部的滑动条。下面这个是让整个body的属性不管发生什么都不显示滑动条。visible默认值。内容不会被修剪，会呈现在元素框之外。hidden内容会被修剪，并且其余内容是不可见的。scroll内容会被修剪，但是... 查看详情

在 Flutter 中的 Scroll 上隐藏底部导航栏

...有一个博客文章列表。我想在帖子列表向下滚动时用向下滑动动画隐藏底部导航栏，并在向上滚动时用向上滑动动画显示。怎么做？【问题讨论】：你能出示代码吗你可以按照我上面所说的举自己的例子。【参考方案1】：此解... 查看详情

css自定义滚动条

...ame窗口，自带滚动条是整个窗口的大小。有时需要顶部或底部固定，则滚动条不应该触碰到顶部或底部。那么首先打开iframe时应该去掉滚动条scrolling="no"，然后在需要滚动的区域自定义滚动条。<iframeframeborder="0"scrolling="no"src="in... 查看详情

css怎么设置内容滚动,滚动条隐藏

css怎么设置内容滚动，滚动条隐藏css操作滚动条：::-webkit-scrollbar-track background-color:#b46868; /*滚动条的滑轨背景颜色*/ ::-webkit-scrollbar-thumb background-color:rgba(0,0,0,0.2); /*滑块颜色*/ ::-webkit-scrollbar-button background-color:#7c2929; /*滑轨两头... 查看详情

css禁止滚动条

CSS禁止滚动条的方法：1、完全隐藏在<boby>里加入scroll="no"，可隐藏滚动条；<bobyscroll="no">2、在不需要时隐藏指当浏览器窗口宽度或高度大于页面的宽或高时，不显示滚动条；反之，则显示；<bobyscroll="auto">3、样式表... 查看详情

如果不需要，CSS隐藏滚动条

】如果不需要，CSS隐藏滚动条【英文标题】：CSShidescrollbarifnotneeded【发布时间】：2013-09-1401:00:09【问题描述】：我想弄清楚如果不需要我如何隐藏overflow-y:scroll;。我的意思是我正在建立一个网站，并且我有一个主要区域，其中将... 查看详情

css禁止滚动条（隐藏或屏蔽ie滚动条的几种常用方法）

CSS 禁止滚动条，有4种方法，具体如下：1、完全隐藏在<boby>里加入scroll="no"，可隐藏滚动条；<boby scroll="no">2、在不需要时隐藏指当浏览器窗口宽度或高度大于页面的宽或高时，不显示滚动条；反之，则显示；<boby scr... 查看详情

移动端遮罩层滚动时，禁止底部滑动

使用溢出时无法隐藏滚动条：自动

】使用溢出时无法隐藏滚动条：自动【英文标题】：can\'thidescrollbarwhenusingoverflow:auto【发布时间】：2013-12-2504:34:26【问题描述】：我有这个CSS：.divbackground-color:red;position:relative;height:414px;overflow:auto;width:902px;margin:0pxauto;我尝试使用... 查看详情

android如何隐藏底部虚拟按键

...（以三星Note8为例）。设置-显示-导航条-显示和隐藏按钮-滑动开关。开启后，在下方导航栏左侧出现一个小圆点的按钮，点击此图标可以隐藏导航栏。隐藏后，您可以通过从屏幕底部向上滑动来使用导航按钮。温馨提示：导航栏... 查看详情

htmljs或者css怎么做到隐藏滚动条，但是依旧可以滚动？

...就不要说了，我现在就是在用这个，内层比外层要大20px左右，但是一旦窗口缩小的话，文字就会溢出外层的DIV，因为内层比外层要大。现在我的需求就只有两种解决方案：1隐藏滚动条，然后依旧可以滚动。2当用户没有动作时，... 查看详情

css--滚动条设置；

...内容auto：仅当内容超出限定值时添加滚动条hidden：总是隐藏滚动条scroll：总是显示滚动条2、height:设置滚动条的高度（修改其后数值即可）。3、滚动条颜色参数设查看详情