精华内容
下载资源
问答
  • html 底部出现滚动条 去掉滚动条

    万次阅读 2017-03-31 15:03:16
    网页的宽度超过了屏幕宽度,所以系统自动添加滚动条 CSS 禁止滚动条,有4种方法,具体如下: 1、完全隐藏 在<body>里加入scroll="no",可隐藏滚动条; <body scroll="no"> 2、在不需要时隐藏 指当...

    网页的宽度超过了屏幕宽度,所以系统自动添加滚动条

     

    CSS 禁止滚动条,有4种方法,具体如下:
    1、完全隐藏
    在<body>里加入scroll="no",可隐藏滚动条;
    <body scroll="no">
    
    2、在不需要时隐藏
    指当浏览器窗口宽度或高度大于页面的宽或高时,不显示滚动条;
    反之,则显示;
    <body scroll="auto">
    
    3、样式表方法
    在<body>里加入style="overflow-x:hidden",可隐藏水平滚动条;
    加入style="overflow-y:hidden",可隐藏垂直滚动条。
    被包含页面里加入
    <style>
    html { overflow-x:hidden; }
    </style>
    
    4、另一种方法
    <style type="text/css">
    body {
    overflow-x:hidden;
    overflow-y:hidden;
    }
    </style> 
    
    <style type="text/css">
    html {
    overflow-x:hidden;
    overflow-y:hidden;
    }
    </style>
    
    

     

     

     

    -- NORMAL --
    展开全文
  • 新建一个空白html,手机屏幕小会出现滚动条,没有设置任何样式。怎样设置去掉滚动条,使用页面拉伸效果。 ![图片说明](https://img-ask.csdn.net/upload/201902/12/1549940775_622573.png) ![图片说明]...
  • CSS 滚动条属性

    千次阅读 2016-09-21 16:15:56
    有没有觉得浏览器自带的原始滚动条很不美观,同时也有看到很多网站的自定义滚动条显得高端,就连chrome32.0开发板都抛弃了原始的滚动条,美观多了。那webkit浏览器是如何自定义滚动条的呢? 前言 webkit支持...

    有没有觉得浏览器自带的原始滚动条很不美观,同时也有看到很多网站的自定义滚动条显得高端,就连chrome32.0开发板都抛弃了原始的滚动条,美观多了。那webkit浏览器是如何自定义滚动条的呢?

    前言

    webkit支持拥有overflow属性的区域,列表框,下拉菜单,textarea的滚动条自定义样式,所以用处还是挺大的。当然,兼容所有浏览器的滚动条样式目前是不存在的。

    演示

    来看看这2个滚动条demo: demo1(图片版)demo2(纯CSS3版)

    滚动条组成

    • ::-webkit-scrollbar 滚动条整体部分
    • ::-webkit-scrollbar-thumb  滚动条里面的小方块,能向上向下移动(或往左往右移动,取决于是垂直滚动条还是水平滚动条)
    • ::-webkit-scrollbar-track  滚动条的轨道(里面装有Thumb)
    • ::-webkit-scrollbar-button 滚动条的轨道的两端按钮,允许通过点击微调小方块的位置。
    • ::-webkit-scrollbar-track-piece 内层轨道,滚动条中间部分(除去)
    • ::-webkit-scrollbar-corner 边角,即两个滚动条的交汇处
    • ::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件

    简洁版

    这里就不贴出详细代码了,demo里面可以通过查看源码寻找具体样式的设置。来看看demo2中第二个滚动条的样式

    1. /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/  
    2. ::-webkit-scrollbar  
    3. {  
    4.     width16px;  
    5.     height16px;  
    6.     background-color#F5F5F5;  
    7. }  
    8.   
    9. /*定义滚动条轨道 内阴影+圆角*/  
    10. ::-webkit-scrollbar-track  
    11. {  
    12.     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);  
    13.     border-radius: 10px;  
    14.     background-color#F5F5F5;  
    15. }  
    16.   
    17. /*定义滑块 内阴影+圆角*/  
    18. ::-webkit-scrollbar-thumb  
    19. {  
    20.     border-radius: 10px;  
    21.     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);  
    22.     background-color#555;  
    23. }  

    详细设置

    定义滚动条就是利用伪元素与伪类,那什么是伪元素和伪类呢?

    伪类大家应该很熟悉:link,:focus,:hover,此外CSS3中又增加了许多伪类选择器,如:nth-child,:last-child,:nth-last-of-type()等。

    CSS中的伪元素大家以前看过::first-line,:first-letter,:before,:after。那么在CSS3中,伪元素进行了调整,在以前的基础上增加了一个“:”也就是现在变成了“::first-letter,::first-line,::before,::after”,另外CSS3还增加了一个“::selection”。两个“::”和一个“:”在css3中主要用来区分伪类和伪元素。

    webkit的伪类和伪元素的实现很强,可以把滚动条当成一个页面元素来定义,再结合一些高级的CSS3属性,比如渐变、圆角、RGBa等等。然后如果有些地方要用图片,可以把图片也可以转换成Base64,不然每次都得加载那个多个图片,增加请求数。

    任何对象都可以设置:边框、阴影、背景图片等等,创建的滚动条任然会按照操作系统本身的设置来完成其交互的行为。下面的伪类可以应用到上面的伪元素中。有点小复杂,具体怎么写可以看第一个demo,那里也有注释。

    1. :horizontal  
    2. //horizontal伪类适用于任何水平方向上的滚动条  
    3.   
    4. :vertical  
    5. //vertical伪类适用于任何垂直方向的滚动条  
    6.   
    7. :decrement  
    8. //decrement伪类适用于按钮和轨道碎片。表示递减的按钮或轨道碎片,例如可以使区域向上或者向右移动的区域和按钮  
    9.   
    10. :increment  
    11. //increment伪类适用于按钮和轨道碎片。表示递增的按钮或轨道碎片,例如可以使区域向下或者向左移动的区域和按钮  
    12.   
    13. :start  
    14. //start伪类适用于按钮和轨道碎片。表示对象(按钮 轨道碎片)是否放在滑块的前面  
    15.   
    16. :end  
    17. //end伪类适用于按钮和轨道碎片。表示对象(按钮 轨道碎片)是否放在滑块的后面  
    18.   
    19. :double-button  
    20. //double-button伪类适用于按钮和轨道碎片。判断轨道结束的位置是否是一对按钮。也就是轨道碎片紧挨着一对在一起的按钮。  
    21.   
    22. :single-button  
    23. //single-button伪类适用于按钮和轨道碎片。判断轨道结束的位置是否是一个按钮。也就是轨道碎片紧挨着一个单独的按钮。  
    24.   
    25. :no-button  
    26. no-button伪类表示轨道结束的位置没有按钮。  
    27.   
    28. :corner-present  
    29. //corner-present伪类表示滚动条的角落是否存在。  
    30.   
    31. :window-inactive  
    32. //适用于所有滚动条,表示包含滚动条的区域,焦点不在该窗口的时候。  
    33.   
    34. ::-webkit-scrollbar-track-piece:start {  
    35. /*滚动条上半边或左半边*/  
    36. }  
    37.   
    38. ::-webkit-scrollbar-thumb:window-inactive {  
    39. /*当焦点不在当前区域滑块的状态*/  
    40. }  
    41.   
    42. ::-webkit-scrollbar-button:horizontal:decrement:hover {  
    43. /*当鼠标在水平滚动条下面的按钮上的状态*/  
    44. }  



    展开全文
  • 彻底解决框架framset在IE6出现横向滚动条的烦恼,这阵子给客户做一个案例的时候,利用主框架不刷新的特点,实现音乐不间断的播放,调用的主页面是1006px在1024*768的分辨率本应该是全屏显示的,但是遗憾的是在IE6...

     彻底解决框架framset在IE6出现横向滚动条的烦恼,这阵子给客户做一个案例的时候,利用主框架不刷新的特点,实现音乐不间断的播放,调用的主页面是1006px在1024*768的分辨率本应该是全屏显示的,但是遗憾的是在IE6下面根本是不是这样的,本来应该只有竖的滚动条,但是使用了FRAMESET框架集以后,在页面没有超出的时候,横向的滚动条也出现了,似乎只要有任意的一边超出以后,都会出现两个滚动条。

       在发现页面有两个滚动条以后,我使用了一个overflow-x:hidden;  这样的CSS样式隐藏了页面的横向滚动,我认为问题以及解决了。结果不是的。当我使用body{width:1006px;margin:0 auto;}让整体的页面居中的时候,我发现事情并不是我想象的那样,在IE6下面测试,页面并没有居中,而是靠右可一些15像素。但是,如果网页不居中的话,就不会有这样的现象,客户要求网页要居中,所以没有办法,怎么办呢?

       我尝试将body的宽度改宽一点,写成1004px,这样的话,在视觉上似乎解决了页面靠右的问题,但是,我用鼠标将字选中后往右拖动的时候,发现页面居然往又去了15px;虽然说不会有浏览者故意往由拖动,但是我觉得这样很不爽。在网上找了许多资料,还是没有收获,下午我不小心翻阅IE6 BUG修复的文章时,发现有这样的一条,在IE6下,如果使用FRAME之类的框架,只要有一边超出以后就会同时出现两个滚动条,横向的滚动条和竖向的滚动条。这是IE的BUG之一。

      原来,并不是我的错,是IE的错!郁闷,也怪自己平时积累太少,我对FRAME之类的框架属性根本就一无所知,感觉框架是非常难理解的东西,再说,框架做的网站对搜索引擎很不友好,所以一般给客户做网站的时候都很少用到这个东西。偏偏这个客户做的网站是观赏性的,也根本不用考虑这些东西。

      讲了这么多,关于IE6下框架出现横向滚动的解决方法有吗?下面是我搜集的一些方法。

    解决方案一:给内页加上样式:html { overflow-y: scroll; }

    当内页大于frame的高度时,仅出现纵向滚动条,效果正确。 当内页高度小于frame的高度时纵向滚动条仍然显示(不可用状态)。这会强制默认出现垂直滚动条, 这样一来, 从某些理由上来讲, 便消去了IE对水平滚动条的需求。完全解决了这个问题, 允许你保持完整的XHTML doctype。

    解决方案二:给内页加上样式:html { overflow-x: hidden; overflow-y: auto; } 当内页的高度大于frame的高度时仅出现纵向滚动条,但右边内容显示不完全。效果不正确。 当内页的高度小于iframe的高度时没有滚动条出现,效果正确。这种做法的优点是在视觉上解决了这个问题,在不必要的时候,没有强制垂直滚动条出现。缺点是:只是简单地隐藏了水平滚动条而已, 并未真正修复这个问题。这样一来,你可能会遇到真的需要有位于当前页面之外的内容而需要水平滚动条的时候,但是它已经被强制隐藏了。

    解决方案三:给内页加上样式:body {margin-right: -15px;margin-bottom: -15px;} 这会在margin的水平和垂直方向上添加一个负值,IE添加了该精确数值后,便会去除对滚动条的需求假象。这种做法的优点是:在视觉上解决了这个问题,未强制垂直滚动条出现。缺点是:由于“人为创建”了15px的外边距(margin),所以无法使用该填充过的屏幕区域。

    解决方案四:纯css解决不 了,我们只好搬出js来了,我们的js有如下思路:当浏览器为IE6且内容高度比iframe高时给html标签加入方案一的样式。

    $(function(){

    if($.browser.msie&&$.browser.version=="6.0"&&$("html")[0].scrollHeight>$("html").height()) $("html").css("overflowY","scroll");

    });

    解决方案五:既然只有IE6有这样的现象的话,可以考虑使用HACK语句针对IE6来修复这个问题。在子网页设置css如下:

    html {overflow-y:auto!important;*overflow-y:scroll;}

      这段最重要的一点是设置overflow-y为scroll,这样强制出现垂直滚动条的话,水平滚动条就不会显示出来了,但如果宽度超出过多,水平滚动条还是会超出,这时可以考虑设置:overflow-x:hidden;,但相应的,这样用户就无法滚动子页面了。

      既然只有IE6有这个BUG那就只针对IE6写就行了

    html {_overflow-y:scroll;}

    _下划线是IE6专有的 这样就又省了一行代码 又提高了效率。

       看了这么多方法,你可以根据自己的情况选择一种适合自己的方法,相信,横向滚动条的烦恼是可以彻底解决的!

    展开全文
  • 最近在用 Bootstrap 写一个需要适配 WEB 和 WAP 的网站,写完后发现 WAP 端总是会出现横向滚动条,也就是 X 轴滚动条,导致 WAP 端页面左右滑来滑去,很是令人蛋疼,即使设置了 overflow-x: hidden 也无法去除,...

    最近在用 Bootstrap 写一个需要适配 WEB 和 WAP 的网站,写完后发现 WAP 端总是会出现横向滚动条,也就是 X 轴滚动条,导致 WAP 端页面左右滑来滑去,很是令人蛋疼,即使设置了 overflow-x: hiddenwidth:100% 也无法去除,通过各种途径寻找解决方法,最终在 张鑫旭 大神的一篇文章里找到了最终解决方法,在这里记录一下防止之后自己用得到时还需要重新找,也为那些同样有这方面问题的童鞋提供方便。

    出现这种问题的主要原因就是,由于内容较多导致出现Y轴滚动条,占用了页面的宽度,从而导致在使用框架做自适应时出现X轴滚动条,影响用户体验。最终只需要在CSS中添加如下代码就可以完美解决,以后妈妈再也不用担心我的代码会出现横向滚动条了。

    代码:

    html {
      overflow-y: scroll;
    }
    
    :root {
      overflow-y: auto;
      overflow-x: hidden;
    }
    
    :root body {
      position: absolute;
    }
    
    body {
      width: 100vw;
      overflow: hidden;
    }
    

    内容参考自 张鑫旭大神的《小tip:CSS vw让overflow:auto页面滚动条出现时不跳动》

    展开全文
  • css3 滚动条样式

    千次阅读 2017-04-21 17:45:26
    自定义IE浏览器滚动条样式 追溯浏览器对滚动条的自定义,恐怕最早的就是IE浏览器了(好像最开始支持的版本是IE5.5)。下面列出了多个版本的支持性况: 滚动条样式 支持情况 支持浏览器版本 ...
  • 自定义浏览器滚动条样式

    千次阅读 2018-07-13 19:00:30
    自定义IE浏览器滚动条样式 滚动条样式 支持情况 支持浏览器版本 可否继承 描述 scrollbar-3dlight-color IE特有属性 IE5.5+ y 设置滚动框的和滚动条箭头左上边缘的颜色 scrollbar-highlight-c.....
  • 其宽度默认为100%的body宽度,但是当容器的高度超过视口宽度时候,页面就会出现滚动条,这个滚动条的宽度就会挤压body的可用宽度,也就是会挤压我们的容器的宽度,造成页面晃动的现象,很不友好,下面就来探讨下如何...
  • css 横向滚动隐藏滚动条Introduction: 介绍: It is always nice to have a responsive website or web page, to create such websites or web pages we have to make use of our developing skills to a great ...
  • 判断滚动条的滚动方向

    千次阅读 2014-12-22 13:45:53
    滚动条事件是js事件中一 个很普遍的事件,如通常网站见到的返回到顶部,还有一些网站侧边栏跟随滚动条的侧边栏,这些都是一个 前端工程师必知的常识,下面我带大家简要的说说滚动条事件的一些基础知识,并顺带给大家...
  • 由于今早碰到同事让我解决一个由于图片过大,导致在浏览器缩放窗口的时候出现了横向滚动条问题,后来在网上查询了下资料,也是为了能够让自己记住这个方法,现在把这个方法写出来,希望能够给大家做网站的时候一个...
  • 以下为初始演示 当滚动条滚动样式如下 下面我就教你如何实现这个样式 这是这个网站导航条的样式 它并没有设置背景颜色,...接下来就是监测滚动条,你会发现滚动条滚动就会在原来的基础上新加了个类 header-scr...
  • 滚动条样式

    千次阅读 2013-09-03 09:33:44
    相信很多人都遇到过在设计中自定义滚动条样式的情景,之前我都是努力说服设计师接受浏览器自带的滚动条样式,但是这样只能规避还是解决不了问题,最近在项目中遇到了,正好来总结一下。当然,兼容所有浏览器的滚动条...
  • 网页滚动条本身就是浏览器的一部分,使用它可以方便浏览较大的网页,下面就是相关语法:新建一个前端学习qun438905713,在群里大多数都是零基础学习者,大家相互帮助,相互解答,并且还准备很多学习资料,欢迎零基础...
  • 修改浏览器滚动条样式(兼容IE)

    万次阅读 2018-10-30 10:22:28
    通常为了满足页面整体的风格的情况下,需要修改滚动条的颜色,各大视频网站都是以添加自定义滚动条的方式来满足,其实也可以理解,毕竟好像就只要添加一两个而已。如果是做管理系统或者其它需要多处修改浏览器滚动条...
  • 我们经常会看到很多的网站一个返回顶部效果就是当我们滚动条到指定位置时返回顶部出来了,否则就自动隐藏了,下面就来给大家介绍这种效果实现原理与方法。 当可视区域小于页面的实际高度时,判定为出现滚动条,即: ...
  • CSS自定义滚动条样式

    2013-05-22 08:49:55
    相信很多人都遇到过在设计中自定义滚动条样式的情景,之前我都是努力说服设计师接受浏览器自带的滚动条样式,但是这样只能规避还是解决不了问题,最近在项目中遇到了,正好来总结一下。当然,兼容所有浏览器的滚动条...
  • 前端隐藏滚动条,但保持滚动效果

    千次阅读 2018-07-18 09:14:39
    一:以隐藏水平滚动条为例。 1.给父元素加一个样式(overflow:hidden),隐藏滚动条,但是这样做之后,滚动效果也会消失。 2.障眼法,给父元素添加样式(overflow:hidden),而子元素添加(overflow-x:hidden;overflow-y...
  • 在一些支持用 markdown 写文章的网站,后台写作页面,一般都是支持 markdown 即时预览的,也就是将整个页面分成两部分,左半部分是你输入的 markdown 文字,右半部分则即时输出对应的预览页面,例如下面就是 CSDN ...
  • 但是iframe用起来,真的是让人头痛,高度无法控制,难看的滚动条等等,下面我分享一下自己在处理iframe时的一些心得。 高度自适应 <iframe src=...
  • 只用css解决跳动滚动条问题

    千次阅读 2018-06-21 16:49:13
    因为网页内容高度小于浏览器高度的时候滚动条是隐藏的,当网页内容高度大于浏览器高度的时候滚动条又出来了,这导致页面在水平方向会有小范围的位移;经典解决样式如下:Html:{ overflow-y:scroll;}这种处理方法会让...
  • 前段时间,到网上找素材时,看到了一个很个性的滚动条式,打开Chrome的调试工具看了一下,发现不是用JavaScript来模拟实现的,觉得有必要折腾一下。于是在各大浏览器中对比了一下,发现只用Chrome适用,也就是说这个...
  • html中如何去掉浏览器右边的滚动条

    万次阅读 2018-07-12 16:45:37
    &lt;body style="overflow-x: hidden"&gt;:表示去掉水平滚动条。&lt;body style="overflow-y: hidden"...:表示隐藏横向滚动条,显示纵向滚动条:&lt;body style="ov
  • js实现滚动条自动滚动(scrollTop)

    万次阅读 2019-02-19 23:08:28
    效果类似于直播网站的评论,会一接着一向上 go out ;   js部分很简单:通过控制scrollTop的值来实现自动滚动效果;  很重要两点: 1、scrollTop的值不可以加单位,谨记!  2、网页缩放比例会影响效果...
  • 实现系统滚动条换肤功能

    千次阅读 2012-06-05 13:10:28
    对于Windows系统中各种控件换肤功能,要数滚动条的换肤最难实现了,尤其是控件自带的系统滚动条,如Edit、ListBox、ListView、TreeView等自带的系统滚动条,要想实现其自定义的皮肤功能,用常规办法似乎都无法实现。...
  • CSS3自定义滚动条样式 -webkit-scrollbar

    千次阅读 2017-04-20 16:03:40
    有没有觉得浏览器自带的原始滚动条很不美观,同时也有看到很多网站的自定义滚动条显得高端,就连chrome32.0开发板都抛弃了原始的滚动条,美观多了。那webkit浏览器是如何自定义滚动条的呢? 前言 webkit...
  • iframe高度自适应及隐藏滚动条

    万次阅读 2016-12-22 09:56:17
    在工作中,我们可能会遇到自己公司和其他的公司...但是iframe用起来,真的是让人头痛,高度无法控制,难看的滚动条等等,下面我分享一下自己在处理iframe时的一些心得。 高度自适应 <iframe src="http://huichang.qun
  • 用CSS美化你的滚动条

    2015-04-17 09:23:39
    本文将会告诉你如何用CSS修改/美化浏览器页面上出现滚动条。改变它们的颜色,调整它们的外形,适配你对页面UI设计。我们首先将会看看谷歌(Webkit)浏览器提供了哪些CSS属性,最后,还将介绍如何用jQuery支持其它...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 34,224
精华内容 13,689
关键字:

网站下面出现滚动条