精华内容
下载资源
问答
  • /* 滚动条宽度 */ ::-webkit-scrollbar{width:1px;} /* 滚动条轨道颜色 */ ::-webkit-scrollbar-track{background-color: #000;} /* 滚动条颜色 */ ::-webkit-scrollbar-thumb{background-color: #000;} /* 鼠标移动...

    如下

    /* 滚动条宽度 */
    ::-webkit-scrollbar{width:1px;}
    /* 滚动条轨道颜色 */
    ::-webkit-scrollbar-track{background-color: #000;}
    /* 滚动条颜色 */
    ::-webkit-scrollbar-thumb{background-color: #000;}
    /* 鼠标移动到滚动条上后显示的颜色 */
    ::-webkit-scrollbar-thumb:hover {background-color: #000}
    /* 点击时滚动条的颜色 */
    ::-webkit-scrollbar-thumb:active {background-color: #000}
    

    【Lete乐特个人博客】:https://lete114.now.sh

    展开全文
  • 有时因为美工设计或一些原因我们底部滚动条可以托运的这样看上去特别不舒服了,下面我们来介绍如何隐藏浏览器滚动条的实现方法:/p>强制显示滚动:html { overflow: scroll; }强制隐藏滚动:html { overflow: hidden...

    有时因为美工设计或一些原因我们底部滚动条可以托运的这样看上去特别不舒服了,下面我们来介绍如何隐藏浏览器滚动条的实现方法:/p>

    强制显示滚动:

    html { overflow: scroll; }

    强制隐藏滚动:

    html { overflow: hidden; }

    隐藏IE的水平滚动条:

    html { overflow-x: hidden; }

    隐藏IE的垂直滚动条:

    html { overflow-y: hidden; }

    强制显示IE的水平滚动条:

    html { overflow-x: scroll; }

    强制显示IE的垂直滚动条:

    html { overflow-y: scroll; }

    强制显示Mozilla的水平滚动条:

    html { overflow:-moz-scrollbars-horizontal; }

    注意: 仅仅强制显示水平滚动: 也就是说, 即使需要显示垂直滚动条: 垂直滚动条也不会出现.

    强制显示Mozilla的垂直滚动条:

    html { overflow:-moz-scrollbars-vertical; }

    注意: 仅仅强制显示垂直滚动: 也就是说, 即使需要显示水平滚动条: 水平滚动条也不会出现.

    这么多我们都会有注意到一个html这个,所有的隐藏浏览器滚动的我们都利用了html属于来定义了:/p>

    展开全文
  • CSS隐藏滚动条

    千次阅读 2018-12-10 17:31:53
    CSS隐藏滚动条 横向滑动/滚动隐藏滚动条 简介 移动端浏览器将页面的滚动条自动隐藏,同时又保证页面可以滚动,用户可以手动上下翻。 PC端浏览器不会将页面的滚动条自动隐藏,在出现横向滚动条时候有可能会覆盖内容...

    CSS隐藏滚动条

    横向滑动/滚动隐藏滚动条

    简介

    移动端浏览器将页面的滚动条自动隐藏,同时又保证页面可以滚动,用户可以手动上下翻。

    PC端浏览器不会将页面的滚动条自动隐藏,在出现横向滚动条时候有可能会覆盖内容,直接隐藏横向滚动条会导致无法横向滚动。

    如何做到既隐藏滚动条,又可以横向滚动?

    设想是不是可以隐藏了滚动条的大部分,留下一小部分,用来滚动查看内容。

    下面一起来实现这个hack吧

    示例

    //html结构
    <div class="demo-tab">
      <ul id="items">
        <li class="item"><div class="item-on"></div></li>
        <li calss="item"><div></div></li>
        <li class="item"><div></div></li>
        <li class="item"><div></div></li>
      </ul>
    </div>
    
    //css
    <style>
    .demo-tab{
      position:fixed;
      bottom:41px;
      overflow:hidden;/*主要*/
      width:100%;
      height:50px;/*主要*/
    }
    .demo-tab ul{
      width:100%;
      height:60px;/*主要*/
      font-size:0;
      background:#e8e8e8;
      overflow-x:scroll;/*主要*/
      overflow-y:hidden;/*主要*/
      white-space:nowrap;
    }
    .item{
      display:inline-block;
      width:33.3333333%;
      height:100%;
      padding:10px 0;
      font-size:18px;
      background:#9c9c9c;
    }
    .item-on{
      height:12px;
      background:#04be02;
    }
    </style>
    

    原理:

    外层的div的高度要比里层ul/div或者其它元素的高度小,然后overflow:hidden,这样就可以隐藏了滚动条的大部分,留下一小部分,用来滚动查看内容。

    应用场景

    • 顶部或者底部的Tab比较多,需要滚动显示

    浏览器兼容性

    特征ChromeFirefoxSafariEdgeIEOpera
    基本支持yesyesyesyes9+yes

    参考:

    1. https://www.cnblogs.com/youlinwd/p/5540864.html

    纵向滑动/滚动隐藏滚动条

    简介

    移动端浏览器将页面的滚动条自动隐藏,同时又保证页面可以滚动,用户可以手动上下翻。

    PC端浏览器不会将页面的滚动条自动隐藏,在出现横向滚动条时候有可能会挤压页面内容,造成页面布局混乱。

    如何做到既隐藏滚动条,又可以纵向滚动?

    示例

    //html结构
    <div class="outer-container">
         <div class="inner-container">
            <div class="content">
                ......
            </div>
         </div>
     </div>
    
    //css
    <style>
    .outer-container,.content {
        width: 200px; height: 200px;
    }
    .outer-container {
        position: relative;
        overflow: hidden;
    }
    .inner-container {
        position: absolute; left: 0;
        overflow-x: hidden;
        overflow-y: scroll;
    }
    
     /* for Chrome */
    .inner-container::-webkit-scrollbar {
        display: none;
    }
    </style>
    

    原理:

    滚动容器父级溢出隐藏,滚动容器绝对定位左对齐,滚动条超出父级元素,所以滚动条就隐藏了,只能通过鼠标滚轮滚动。

    应用场景

    • 内容较多的一个section,出现纵向滚动条影响内容布局。

    浏览器兼容性

    特征ChromeFirefoxSafariEdgeIEOpera
    基本支持yesyesyesyes6+yes

    参考:

    1. https://blogs.msdn.microsoft.com/kurlak/2013/11/03/hiding-vertical-scrollbars-with-pure-css-in-chrome-ie-6-firefox-opera-and-safari/
    2. https://www.cnblogs.com/alice626/p/6206760.html

    推荐(好用又好看的滚动条插件):

    1、jQuery滚动条插件-jQuery custom content scroller

    http://www.jq22.com/jquery-info124

    2、简洁的jQuery滚动条插件scrollBar.js

    http://www.jq22.com/jquery-info17348

    3、nicescroll

    https://github.com/inuyaksa/jquery.nicescroll

    4、iScroll

    https://github.com/cubiq/iscroll

    展开全文
  • let div=this.$refs.demoRef // 可以使用document找标签 this.$nextTick(()=>{ // 这是vue提供的api,js中可以使用setTimeout div.scrollTop=div.scrollHeight })
  • 横向滚动条就是我遇到麻烦中其中的一个,其实也 很简单,只是在几次项目中都用到了这个横向滚动条所以就拿出来说一下。需求界面---如下图: 就是一个div里面放很多button,超出div宽度,下方出现横向滚动条。实际...

    在前端UI设计时,网页的制作很麻烦,深有感悟!碰到太多的不懂,或是第一次见,就要去网上找资料!横向滚动条就是我遇到麻烦中其中的一个,其实也 很简单,只是在几次项目中都用到了这个横向滚动条所以就拿出来说一下。

    需求界面---如下图:

    ee3e80189d3f467538c2a4f24b872c76.png     就是一个div里面放很多button,超出div宽度,下方出现横向滚动条。实际情况中,肯定不止几个button,它是可以动态的添加进去,所以父div的宽度肯定不够,但界面的位置排版又有要求,所以不得不弄一个横向滚动条。

    代码如下:

    进入分区

    1号分区

    2号分区

    3号分区

    4号分区

    5号分区

    6号分区

    7号分区

    8号分区

    用CSS实现横向滚动条

    在进行app制作时,需要使用横向滚动条是内容展示更完善 首先,这是html代码: 这是CSS代码: 要点: 设置显示内容的宽 white-space是防止内容自动折行 overflow-y设置为hid ...

    纯css 实现横向滚动条--移动端

    * { margin:0; padding:0; } li { list-style:none; } .box1 { width:320px; height:60px; overflow:hidden ...

    css 横向滚动条webkit-scrollbar

    最近遇到一个横向滚动条的问题: 官网链接: https://developer.mozilla.org/zh-CN/docs/Web/CSS/::-webkit-scrollbar 这个 ::-web ...

    jquery横向滚动条

    此代码献给wendy 由于工作太忙,下次再整理成插件调用,先记录下来,欢迎同学们提意见. /p>

    CSS美化页面滚动条

    文章来自:http://www.webhek.com/scrollbar 本文将会告诉你如何用CSS修改/美化浏览器页面上出现的滚动条.改变它们的颜色,调整它们的外形,适配你对页面UI设计.我们首先将 ...

    JS模拟滚动条&lpar;有demo和源码下载&comma;支持拖动 滚轮 点击事件&rpar;

    由于游览器自带的滚动条在美观方面并不是很好看,所以很多设计师希望通过自己设计出来的滚动条来做这样的效果,JS模拟滚动条其实很早看到jQuery有这样的插件或者KISSY有这样的组件,一直想着自己什么时 ...

    js网页滚动条滚动事件实例分析

    本文实例讲述了js网页滚动条滚动事件用法.分享给大家供大家参考.具体分析如下: 在做js返回顶部的效果时,要监听网页滚动条滚动事件,这个事件就是:window.onscroll.当onscroll事件 ...

    js获取滚动条距离浏览器顶部&comma;底部的高度&comma;兼容ie和firefox

    做web开发经常会碰到需要获取浏览器的滚动条与顶部和底部的距离,然后做相应的处理动作.下面作者就如何通过js来获取浏览器滚动条距离浏览器顶部和底部的高度做一下分享,这个是同时兼容ie和firefox的 ...

    逆天的IE7中,诡异的横向滚动条

    今天老邹我又要吐槽IE7了,这个奇葩浏览器总是不让省心.这回遇到的问题,灰常难发现是怎么回事,不过还是让我发现原因,哈哈,只要原因去干掉这个问题比躲避问题用别的办法绕开要爽的多啊. 首先我还是介绍下, ...

    CSS定义网页滚动条

    (一)滚动条样式主要涉及到如下CSS属性: overflow属性: 检索或设置当对象的内容超过其指定高度及宽度时如何显示内容overflow: auto; 在需要时内容会自动添加滚动条overflow ...

    随机推荐

    Dagger2 &lpar;一&rpar; 入坑篇

    为什么是Dagger2 为了更好的了解Dagger2,请先阅读RoboGuice篇了解依赖注入. 官方文档称,依赖注入这种技术已经在存在多年了,为什么Dagger2要造轮子? Dagger2是第一个全 ...

    CentOs5&period;8下安装Oracle12C

    12C安装向导: http://docs.oracle.com/database/121/LTDQI/toc.htm 12C下载地址: http://www.oracle.com/technetwor ...

    LeetCode 【47&period; Permutations II】

    Given a collection of numbers that might contain duplicates, return all possible unique permutations ...

    【翻译习作】 Windows Workflow Foundation程序开发-第一章04

    1.2.3  Windows Workflow运行时 从Windows Workflow的角度看,可以将工作流活动当成是交给一个工作流处理器去执行的一系列指令或操作码.在Windows Workflo ...

    METRO风格

    METRO风格是指微软在WINDOWS PHONE 7中新加入的界面风格,并且计划将其用于windows8中的开始菜单界面.该界面的特点是简洁高效,每一个METRO图标都没有边框,形状有点像地铁站中的 ...

    OSS&period;Common扩展&period;Net Standard支持实例分享

    上篇(.Net基础体系和跨框架开发普及)介绍了.Net当前生态下的大概情况,也分享了简单实现的过程,这篇文章就是讲解我的OSS.Common项目扩展.Net Standard 支持的过程,主要集中在: ...

    Http get方式url参数长度以及大小

    详见: http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp69 众所周知, 传递小量参数(在没有其他原因,例如隐藏参数值的情况下)推 ...

    win10汇编如何debug(小白向)

    先引用别人的方法 http://blog.csdn.net/lcr_happy/article/details/52491107 按他所说的下完对应软件后,安装其中的dosbox,然后将debug.e ...

    spring Boot环境下dubbo&plus;zookeeper的一个基础讲解与示例

    一,学习背景 1.   前言 对于我们不管工作还是生活中,需要或者想去学习一些东西的时候,大致都考虑几点: a)      我们为什么需要学习这个东西? b)     这个东西是什么? c)      ...

    展开全文
  • 新版Element ui 级联选择框CSS样式高度溢出和去除底部滚动条问题 解决方法: 在全局样式中加入以下代码 App.vue中style加入或者导入的全局css样式中加入以下代码: .el-cascader-panel { height: 280px; } 去除...
  • 所需CSS样式为overflow-y和overflow-x来设置div盒子对象右侧和底部滚动条效果。同时也可以使用CSS样式设置html框架iframe的滚动条隐藏,接下来为大家介绍。 一、CSS基础认识 - TOP overflow-y:scroll; 总是显示...
  • / css怎么实现元素不随滚动条滚动css怎么实现元素不随滚动条滚动来源:辰迅云编辑:chenxun时间:2021-04-22 14:48:01今天小编给大家分享的是css怎么实现元素不随滚动条滚动,相信很多人都不太了解,为了让大家更加...
  • css设置滚动条样式

    千次阅读 2017-04-14 13:55:13
    近期在做一个项目,由于主题风格是黑色的,而浏览器默认的滚动条的风格放到页面上颜色太突兀,就想着该给它修改一下样式,以下是我整理的通过css设置滚动条样式。  查了很多资料,由于各个浏览器都有各自不同的滚动...
  • css滚动条

    2019-10-15 22:12:10
    css滚动条 一.默认样式的滚动条 引例:我们平时编写盒模型时,如果想要实现定义一个父级元素中装着一些图片或文本内容,让这些图片或文本内容呈现出有滚动条样式的效果,应该怎样实现呢? 思路:我们知道,在父级元素...
  • CSS自定义滚动条样式,兼容IE浏览器

    千次阅读 2019-06-18 16:23:15
    经常写页面的同学都知道,浏览器一般自带的滚动条样式很丑,和页面风格格格不入,于是就想着是否能够改变原有滚动条样式?但实际中,其他浏览器又和IE浏览器不一样,导致兼容性不好。 chrome浏览器滚动条自定义样式...
  • 1.这一看就要用到overflow,但是用它会有一个默认的滚动条; 2.那么重点来了,怎么解决这个问题呢? 3.用::-webkit-scrollbar 就可以很好地解决。 代码如下: css * { padding: 0; mar...
  • 预习了CSS3部分的新知识,想着在不使用JS的情况下实现导航栏滚动条效果,如下: 实现滚动条效果,其实就是在<li></li>标签中让<span>元素的宽度由0变化到100%,代码很简单,如下所示: CSS...
  • 目录前言布局的情况讨论内容显示小于屏幕高度内容显示超过屏幕高度出现滚动条代码实现效果 前言 在显示网站的ICP备案信息时,我们希望ICP备案信息永远在最下面,但是当页面数据过多出现滚动条时,ICP备案信息也在最...
  • div: 当 滚动的距离+div的高度 == 文档的高度时,则滚动条以滑动到底部。$(document).ready(function (){var nScrollHight = 0; //滚动距离总长(注意不是滚动条的长度)var nScrollTop = 0; //滚动的距离var ...
  • 复制代码代码如下:#totop{position:fixed;right:10px;bottom:10px;width:100px;height:100px;}
  • 下面我们来看一下使用css设置滚动条的方法。一、我们可以使用overflow属性设置是否出现滚动条overflow:scroll /* x y 方向都会*/或者overflow-x:scroll /*只是x方向*/或者overflow-y:scroll /*只是y方向*/当块级内容...
  • css div不随滚动条移动的实现方法:首先创建一个示例文件;然后通过给div设置css属性样式为“position:fixed;”即可固定div不随滚动条移动。本教程操作环境:Windows7系统、HTML5&&CSS3版本,该方法适用于...
  • css 滚动条滑动到底部时触发事件

    千次阅读 2013-11-23 17:01:52
    div: 当 滚动的距离+div的高度 == 文档的高度时,则滚动条以滑动到底部。 $(document).ready(function (){  var nScrollHight = 0; //滚动距离总长(注意不是滚动条的长度)  var nScrollTop = 0; //滚动的距离 ...
  • CSS侧边滚动条的隐藏

    千次阅读 2019-05-09 22:44:14
    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <...style type="text/css"> .out-box{ posi...
  • elementUI布局el-aside消除底部滚动条

    千次阅读 2020-04-04 18:53:58
    在elmentUI中使用了el-aside布局侧边栏,但是莫名出现了底部的滚动条,如下 解决方法: ...然后底部滚动条就没了,如果消除侧边的滑动条,把el-scrollbar中样式的height改成100%应该也是可以的。 ...
  • desObj.scrollTop=desObj....//设置滚动条在最下方 desObj为滚动包含元素,即为设置overflow属性的元素 scrollTop为滚动距离;可读可写 scrollHeight为元素所包含高度,包含已隐藏等等全部;只读 ...
  • html 底部出现滚动条 去掉滚动条

    万次阅读 2017-03-31 15:03:16
    CSS 禁止滚动条,有4种方法,具体如下: 1、完全隐藏 在<body>里加入scroll="no",可隐藏滚动条; <body scroll="no"> 2、在不需要时隐藏 指当浏览器窗口宽度或高度大于页面的宽或高时,不显示滚动条;...
  • CSS设置滚动条样式(兼容IE)

    千次阅读 2018-01-26 00:23:24
    2、在IE浏览器下显示的样式(为了区分所以样式写的不一样,我没找到IE下设置滚动条宽高的方法) 自定义IE浏览器滚动条样式 追溯浏览器对滚动条的自定义,恐怕最早的就是IE浏览器了(好像...
  • 通常浏览器(包括谷歌浏览器)使用下面的代码可以实现 .nav{ width: 220px;height: 100%;over-y:scroll;} .nav::-webkit-scrollbar {display: none;} 火狐浏览器需要使用以下代码 .nav{ width: 220px;...
  • css滚动条固定浮动position:fixed;

    千次阅读 2013-12-09 10:51:33
    css滚动条固定浮动position:fixed;"position:fixed " 是定位代码的。"!important" 是解决浏览器兼容问题的。(IE内核系列的浏览器)”-“ ‘*’ CSS前面加_或者 * 也是处理浏览器兼容问题的。 都是IE系列的浏览器...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 22,538
精华内容 9,015
关键字:

css底部滚动条