精华内容
下载资源
问答
  • 在一些网站和一些BS架构的业务系统中,尤其是一些特殊场景,如数据监控、时间轴等展示框里,我们不希望页面中出现滚动条,但同时呢,我们还希望在内容过多时,保留鼠标滚轮的响应能力,那么今天就给大家带来一个小...

    大家好,欢迎踏入野生程序猿的生存之道,我是你们的老朋友大猿!

    今天我们来聊聊怎样让你做的网站的滚动条消失。在一些网站和一些BS架构的业务系统中,尤其是一些特殊场景,如数据监控、时间轴等展示框里,我们不希望页面中出现滚动条,但同时呢,我们还希望在内容过多时,保留鼠标滚轮的响应能力,那么今天就给大家带来一个小技巧,让你的滚动条马上消失~

    我们先来看看下面这个场景,是不是很眼熟?

    24e996b48a676448314cd2f915b390d8.gif

    示意图中有两个容器,外层容器为a,用红色边框表示,内层容器为c,用蓝色边框表示:

     
      

      ………  

     

    我们的目标就是把a的滚动条隐藏。这时有的同学就会说,我直接在a上面加个overflow:hidden不就行了吗,确实,这样滚动条是隐藏了,但也失去了响应鼠标滚轮的能力,这是我们所不希望看到的。我们的终极目标是,即看不见滚动条,又能用滚轮滚动。

    这里我们介绍两个常用方案:

    方案一:利用css伪对象选择器

    直接上代码:

    简单粗暴,直接利用伪对象选择器将滚动条的宽度设置成0,但是缺点也很明显,只能支持Chrome和Safari浏览器。

    方案二(推荐):让滚动条位于最外层容器的外面,以达到不可见的目的

    具体的思路就是,先让a的overflow:hidden,同时在c的外面套一层b,b的高度等于a的高度,b的宽度大于a的宽度,让滚动条出现在b上,而c的宽度与a保持一致。是不是绕迷糊了?直接看代码吧:

     
      
       

       ……   

      
     

    让我们来看看效果(为了看的更明显,我们把b的边框设为黄色):

    024cb191c6423503dab7814bb3b54ea1.gif

    可以看到,已经实现了我们想要的效果,既没有滚动条,还能用鼠标滚轮上下滚动。那么当我们用滚轮滚动的时候,到底发生了什么呢?我们把a的overflow: hidden改成overflow:visible,来看一下它的真身:

    411719ec00ae8d1a3ae2d51dfa05d00c.gif

    原来如此,一目了然!

    不过细心的同学可能注意到一个问题,为什么蓝框c的宽度似乎并未占满红框a呢?原因其实就出在黄框b上,b因为有滚动条,所以其内容的真正宽度是小于a的200%的,也就导致了c的宽度小于200%乘以50%,即小于a的100%,这种误差在a的宽度越小时越明显,那么怎么解决呢?也很简单,让b的宽度是1000%,c的宽度是10%,总之就是让b尽量大,以缩小滚动条所占的宽度比例,进而就能减少误差啦。如果你的容器宽度是固定的,那就更简单了,直接把三个框的宽度都写死,只要确保b的宽度能多出来一个滚动条的宽度就好啦~

    最终效果如下:

    f2b6270750dfad1ea9b470490e0a9990.gif

    好了小伙伴们,你们学会了吗?点我头像能学习更多实用的开发小技巧,别忘了点关注哦~

    展开全文
  • 由于今早碰到同事让我解决一个由于图片过大,导致在浏览器缩放窗口的时候出现了横向滚动条问题,后来在网上查询了下资料,也是为了能够让自己记住这个方法,现在把这个方法写出来,希望能够给大家做网站的时候一个...

    由于今早碰到同事让我解决一个由于图片过大,导致在浏览器缩放窗口的时候出现了横向滚动条问题,后来在网上查询了下资料,也是为了能够让自己记住这个方法,现在把这个方法写出来,希望能够给大家做网站的时候一个参考

    关于这个方法也是很简单,就是一小段JS加到页面中就可以,好吧废话不多说,下面把这段代码贴出来


    jQuery(document).ready(function () {
    jQuery("body").attr("style","overflow-x:hidden");
    });


    展开全文
  • div模拟滚动条

    2015-04-12 21:09:00
    特别是在黑色风格的网站中 用iframe嵌套或者overflow:auto 出现滚动条的时候 那么我们来模拟一个滚动条吧 demo01 说明: 1.content元素不能有border 如果有10px的border 把滚条拖到最下面后 将有10px内容看不...

     

    如果内容有误,还请留言帮我指出,非常感谢

     

    有木有觉得window下浏览器默认的滚动条很丑?

    特别是在黑色风格的网站中 用iframe嵌套或者overflow:auto 出现滚动条的时候

    那么我们来模拟一个滚动条吧

     demo01

    说明:
        1.content元素不能有border  如果有10px的border 把滚条拖到最下面后 将有10px内容看不到
        2.调用方式:scrollFuc('content','nr','scroll_con','scroll_box');
    不足:
        此版本没有抽象出对scrollBox高度的设置 因为在nr有变化时 将会对scrollBox高度进行再设置 比如ajax请求改变内容

    ----------------------------------

     demo02

    说明:
       	1.content元素不能有border  如果有10px的border 把滚条拖到最下面后 将有10px内容看不到
       	2.此版本抽象出对scrollBox高度的设置 但是调用方式有所改变:
         	scrollFuc('content','nr','scroll_con','scroll_box');//启动函数
    	    scrollBoxH('content','nr','scroll_con','scroll_box');//设置box高度 如果nr有增加或减少 就要再调用这个函数 
    不足:
       	在scrollBoxH函数内部 设置了scroll_box的高度后 会重置nr和滚条的位置为起始位置 在有些情况下是不合理的(改变了nr后 但是不要还要保持nr和滚条的当前位置)
    
     
    ----------------------------------

     demo03

    说明:
       	1.content元素不能有border  如果有10px的border 把滚条拖到最下面后 将有10px内容看不到
       	2.此版本抽象出对scrollBox高度的设置 但是调用方式有所改变:
         	scrollFuc('content','nr','scroll_con','scroll_box');//启动函数
    	    scrollBoxH('content','nr','scroll_con','scroll_box');//设置box高度 如果nr有增加或减少 就要再调用这个函数
        3.修改了scrollBoxH函数,调用方式:
            表示不刷新当前位置:
                            scrollBoxH('content','nr','scroll_con','scroll_box',false); 
            表示刷新当前位置(最后的true参数可省略):
                            scrollBoxH('content','nr','scroll_con','scroll_box',true); 
            表示nr跳至指定位置(即设置nr的top属性为-38,当最后的参数为足够小时如-99999999 nr会跳至最底部 当最后的参数为正时会跳至顶部):
                            scrollBoxH('content','nr','scroll_con','scroll_box',-38); 
    不足:
        代码有点乱 有时间了再来整理

     

    ----------------------------------

     demo04

    说明:
       	1.'content','nr','scroll_con','scroll_box'四个元素都不要能有border!!!
       	2.此版本抽象出对scrollBox高度的设置(根据内容) 但是调用方式有所改变:
         	scrollFuc('content','nr','scroll_con','scroll_box');//启动函数
    	    setScroll('content','nr','scroll_con','scroll_box');//设置box高度 如果nr有增加或减少 就要再调用这个函数
        3.修改了setScroll(scrollBoxH)函数,调用方式:
            表示不刷新当前位置:
                            setScroll('content','nr','scroll_con','scroll_box',false); 
            表示刷新当前位置(最后的true参数可省略):
                            setScroll('content','nr','scroll_con','scroll_box',true); 
            表示nr跳至指定位置(即设置nr的top属性为-38,当最后的参数为足够小时如-99999999 nr会跳至最底部 当最后的参数为正时会跳至顶部):
                            setScroll('content','nr','scroll_con','scroll_box',-38); 
    不足:  
          可以改为面向对象的形式
          滚动条上下两个按钮没有写事件(如果有必要的话);
          不知道用scrollTop写  会不会更好
          不能设置#content 的border
          传参形式可以改为对象的形式更合理
          
    ----------------------------------

     demo05

    说明:
        兼容性:ie6+(混杂模式) Firefox3.6.28+  oprea9.0+  
    新版说明:
        简单封装了
        参数以对象的形式传入
    不足: 
        还可以进一步封装 优化
        在内容不足时 隐藏滚动条
        无法实现横向滚动条
          
    ----------------------------------

     demo06(完整版)  

    兼容性:ie6+(混杂模式) Firefox3.6.28+  oprea9.0+ 
    说明:
        兼容性:ie6+(混杂模式) Firefox3.6.28+  oprea9.0+ 
        简单封装了
        参数以对象的形式传入
        
    新版说明:
        在内容不足时 隐藏滚动条
        添加了水平滚动条的功能
        con nr scon sbox 都可以添加border
        修复了 滚动区域内容不足时 鼠标滚轮不能触发外层滚动条的滚动事件
        修复了 在子窗口滚动到端点时  无法触发父窗口的滚动事件
        
    不足:
        内容不足时 没有注销相关事件 如果在web开发中 用滚动插件来替代浏览器默认的滚动条 在内容不足时 每滚动一次 都会触发相关事件 影响性能 从代码的角度上来说 也是不严谨的
    ----------------------------------

     ...

     开始做的时候没觉得是个麻烦事 ,真正做了之后才知道没那么简单...

    还有继续优化的地方,等有空了再来改吧

     

    转载于:https://www.cnblogs.com/chocho/p/4420430.html

    展开全文
  • 自定义滚动条案例

    2016-10-19 18:24:31
    这两张图片是我从网上截图的,第一张是hao123网站左侧的选项卡,鼠标经过当前选项卡的时候,选项卡的右边会出现滚动条,这个滚动条可以控制选项卡内容的高度,方便读者阅读;第二章是网易首页左侧的选项卡,原理一样...

    网页常见的选项卡,为了在选项卡这么小的空间放进比较多的内容,那么可以运用滚动条来控制内容区域的高度,使当前选项卡放下足够的文字。可能我说的有点抽像,下面用一张图表示一下:


    这两张图片是我从网上截图的,第一张是hao123网站左侧的选项卡,鼠标经过当前选项卡的时候,选项卡的右边会出现滚动条,这个滚动条可以控制选项卡内容的高度,方便读者阅读;第二章是网易首页左侧的选项卡,原理一样,就是滚动条一直显示的,没有鼠标经过才显示的特效;

    那么这些例子都是怎么实现的呢?

    以下我举一个当前的选显卡的例子:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title></title>
            <style type="text/css">
                *{
                    list-style: none;
                }
                #new{
                    width: 300px;
                    height: 700px;
                    float: left;
                    border: 1px solid #000;
                    box-sizing: border-box;
                    padding: 5px;
                    font-size: 20px;
                    overflow: hidden;
                    position: relative;
                }
                #con{
                    width:290px;
                    position: absolute;
                }
                #wrap{
                    margin: 0 auto;
                    width: 25px;
                    height: 700px;
                    background: #976;
                    position: relative;
                    float: left;
                    
                }
                #box{
                    width: 25px;
                    height: 50px;
                    background: chartreuse;
                    position: absolute;
                    top: 0;
                    left: 0;
                }
                #con li{
                    width:200px;
                    height: 80px;
                }
            </style>
            <script type="text/JavaScript">
                window.οnlοad=function(){
                    var oBox=document.getElementById('box');
                    var oWrap=document.getElementById('wrap');
                    var oNew=document.getElementById('new');
                    var oCon=document.getElementById('con');
                    var aLi=oCon.getElementsByTagName('li');
                    for (i=0;i<aLi.length;i++) {
                        if (i%2==0) {
                            aLi[i].style.backgroundColor='#36f';
                        } else{
                            aLi[i].style.backgroundColor='#394';
                        }
                    }
                    
                    var divY=0;
                    oBox.οnmοusedοwn=function(ev){
                        var iEvent=ev||event;    
                        divY=iEvent.clientY-oBox.offsetTop;
                        document.οnmοusemοve=function(ev){
                            var iEvent=ev||event;
                            var s=(iEvent.clientY-divY)/(oWrap.offsetHeight-oBox.offsetHeight) 
                            oCon.style.top=-(oCon.offsetHeight-oNew.offsetHeight)*s+'px';
                            oBox.style.top=iEvent.clientY-divY+'px';                    
                            if(iEvent.clientY-divY<0){
                                oBox.style.top=0;
                            }  
                            if (iEvent.clientY-divY>oWrap.offsetHeight-oBox.offsetHeight) {
                                oBox.style.top=oWrap.offsetHeight-oBox.offsetHeight+'px';
                            } 
                            
                        };
                        document.οnmοuseup=function(){
                            document.οnmοusedοwn=null;
                            document.οnmοusemοve=null;
                        };
                        return false;
                    };
                };
            </script>
        </head>
        <body>
            <div id="new">
                <ul id="con">
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                        <li>5</li>
                        <li>6</li>
                        <li>7</li>
                        <li>8</li>
                        <li>9</li>
                        <li>10</li>
                        <li>11</li>
                        <li>12</li>
                        <li>13</li>
                        <li>14</li>
                        <li>15</li>
                        <li>16</li>
                        <li>17</li>
                        <li>18</li>
                        <li>19</li>
                        <li>20</li>
                        <li>21</li>
                        <li>22</li>
                        <li>23</li>
                        <li>24</li>
                        <li>25</li>
                        <li>26</li>
                        <li>27</li>
                        <li>28</li>

                    </ul>
                
            </div>
            <div id="wrap">
                <div id="box">
                
                </div>
            </div>
            
        </body>
    </html>

    例子效果图是这样的

    展开全文
  • 在显示网站的ICP备案信息时,我们希望ICP备案信息永远在最下面,但是当页面数据过多出现滚动条时,ICP备案信息也在最下面,而不是浮动在屏幕的底部 布局的情况讨论 内容显示小于屏幕高度 如果我们采用flow流布局,...
  • 在一些支持用 markdown 写文章的网站,后台写作页面,一般都是支持 markdown 即时预览的,也就是将整个页面分成两部分,左半部分是你输入的 markdown 文字,右半部分则即时输出对应的预览页面,例如下面就是 CSDN ...
  • 当可视区域小于页面的实际高度时,判定为出现滚动条,即: 代码如下:if (document.documentElement.clientHeight < document.documentElement.offsetHeight) scroll = true; 要使用 document.documentElement ,...
  • 滚动条: ...如果说,我们要定位的内容在下面,需要拉动滚动条才能显示出来,但是我们却能找到它的元素时,这时是定位不到的,因为页面是一拉一渲染,你不拉动滚动条下面就不加载的。这种感觉在网络...
  • 这两张图片是我从网上截图的,第一张是hao123网站左侧的选项卡,鼠标经过当前选项卡的时候,选项卡的右边会出现滚动条,这个滚动条可以控制选项卡内容的高度,方便读者阅读;第二章是网易首页左侧的选项卡,原理一样...
  • 作为展示网站的最新公告信息,因为刚开始自己的思路并不是太清晰,在网上找了很多的源码,但是却发现都不能让自己满意,有的还会出现一些小问题,比如,有时候公告上下滚动的时候,两公告会重叠在一起。...
  • 在开发网站的时候,有的页面需要加载ueditor编辑器,如果内容很长,默认设置的时候编辑器会根据内容拉长,而不是页面出现滚动条,如果拖动页面滚条,会比较麻烦,要拖动很长才能看到提交按钮。 如何才能让编辑辑器...
  • 当导航栏下内容超出页面时,会出现美化过的滚动条。背景图片和导航栏背景色可以根据喜好自己更改。 对了,图片里的网站链接我没放进去,是一些挺好用的网站,如果要的话可以在下面评论区说一下。 好了,开始写代码...
  • 打开淘宝,第一感觉是加载速度还行,... 添加一个滚动条事件,判断图片位置、浏览器顶端的与页面的距离,如果前者小于后者就优先加载。 2:压缩 一:图片展示大小小于DOM元素大小,可以从服务端开始压缩至同等大...
  • 其实原来很简单的,但是切换过程中一些牵扯到的问题还是比较麻烦的,重点对有滚动条出现的父容器包含的表格作了些研究。感觉还行,写了篇技术性的文章。有兴趣的朋友可以通过下面的链接阅读一下。实现了网站窄屏/...
  • PHP动态网站开发插件

    2013-06-18 22:47:24
    用来改变IE浏览器滚动条的颜色的 Command 命令插件 Auto Default Form Field.mxp Download 点击下载 可设置自动清除表单文本参数。 Style switcher Lite.mxp Download 点击下载 早晚载入不同的样式。 IE Link ...
  • 在浏览网页时,我们一般是拖动滚动条向下滑动,浏览下面的内容,当页面超过单页时,右下角会出现一个回到顶部的图标,有些网站这个图标一直显示在右下角的。 有些网站使用锚链接来实现页面内容的跳转,但这种效果的...
  • 点击回到顶部效果

    2013-07-18 16:06:05
    现在随着业务越来越...现在像qq空间、csdn等很多网站都在右下角有一个小图标,点击就会跳转的页面顶部,并且该小图标是随着滚动条的滚动出现和隐藏的。下面就给出这种效果的示例。 #d-top {positi...
  • 项目中,网页页脚的js实现方式

    千次阅读 2018-04-14 09:45:02
    最近,项目中需要给每个页面加入页脚,也就是一个网站由某某某公司开发什么的把,如下图,实现功能:出现滚动条时,页脚在页面内容的最下面;不出现滚动条时,固定在窗口的最最下面网上也有许多用CSS布局来实现...
  • 抓住重点 下面开始实现Bootstrap版本3的Demo 案例 首先去官方网站 http://www.bootcss.com/ 下载 ... ... ...把 相关的js和css 拷贝到项目中 ...尽管屏幕在变小 恒向 也不会出现 滚动条 简单吧 转载于:https://www.c...
  • Iframe框架自动调节高度

    千次阅读 2012-07-26 18:46:19
    做网站的时候,总会用到框架,frame或者iframe,当我们在某个iframe中加载网页时,经常遇到网页高度动态变化的问题,如果不调整iframe的高度,框架就会出现滚动条或是内容显示不完整,让人很不爽。在网上找了一下...
  • 第一:jdk下载 ...将滚动条往下拉,看到"Java SE 7u71/72"点JDK下面的"DOWNLOAD" 在新出现的界面往下拉,看到各系统相关的下载 点选"Accept License Agreement" 点自己操作系统对应的版本,注意自己系统是
  • 网站的页面布局中我们经常要用到IFRAME,而且有事需要IFARME能够自适应内容的大小,免得出现滚动条,太难看。下面是我从网上搜集来的代码,直接用上了,觉得挺好用的,帖出来共享被嵌页面:Inc_Left_Tech.aspx的...
  • 如果一个站是宽屏的,你左右拖动浏览器的窗口网站宽度会随着窗口的大小而改变,而浏览器窗口宽度减小到一定程度后就会出现下边的滚动条网站宽度就不会再减小了,我们知道这一简单的功能用css的min-width就很容易能

空空如也

空空如也

1 2 3 4
收藏数 66
精华内容 26
关键字:

网站下面出现滚动条