zoukankan      html  css  js  c++  java
  • 网页滚动条的处理

    玩转网页滚动条

    网页滚动条本身就是浏览器的一部分,使用它可以方便浏览较大的网页,但是千篇一律的它经常会给整体页面效果拖了不少后腿,我们能不能改变它灰灰的样子呢?能!俗话说:“只有你想不到的,没有做不到的。” 
    给滚动条换色

      几乎所有网页的滚动条都是默认的灰色,如果把它的颜色换换,来点另类的,相信一定会使网页更加靓丽。我们只要在网页代码<head> </head>之间插入下面的代码,即可随心所欲地更改颜色了。

    <style>
    body {SCROLLBAR-FACE-COLOR:#3333FF;(立体滚动条凸出部分的颜色)
    SCROLLBAR-HIGHLIGHT-COLOR:#505050;(滚动条空白部分的颜色)
    SCROLLBAR-SHADOW-COLOR:#fc2400;(立体滚动条阴影的颜色)
    SCROLLBAR-ARROW-COLOR:#666666;(上下按钮上三角箭头的颜色)
    SCROLLBAR-BASE-COLOR:#333333; (滚动条的基本颜色)
    SCROLLBAR-DARK-SHADOW-COLOR:#b4fc48} (立体滚动条强阴影的颜色)
    </style> 

      后面的16位颜色值你可以随意更改,括号内是解释说明,在输入时请不要插入。

      隐藏滚动条

      在任何情况下,如果网页超出显示范围,就会出现滚动条。但有时我们并不想让它显示,如何隐藏它呢?只需在<body> </body>之间插入代码:<body style="overflow-x:hidden;overflow-y:hidden">即可。其中x表示水平滚动条,将其改为y的话就可以隐藏垂直滚动条。

      滚屏显示

      当网页中有长篇文章时,浏览起来就比较吃劲了,想想一边忙着拖动滚动条,一边忙着浏览,确实挺累人的。为了客人能够轻松的浏览,我们可以使用s cript代码实现网页的自动滚屏,当双击网页的时候,网页将会自动向下滚动,再次单击时滚动停止。将下面的代码插入到<body> </body>之间。

    <s cript language"javas cript">
    var currentpos,timer;
    function initialize()
    {
    timer=setInterval("scrollwindow()",10);
    }
    function sc(){
    clearInterval(timer);
    }
    function scrollwindow()
    {
    currentpos=document.body.scrollTop;
    window.scroll(0,++currentpos);
    if (currentpos != document.body.scrollTop)
    sc();
    }
    document.onmousedown=sc 
    document.ondblclick=initialize
    </s cript> 
  • 相关阅读:
    小程序用户拒绝授权地理位置的处理办法
    云开发小程序数据库权限有限,通过云函数修改数据库评论信息
    小程序仿照微信朋友圈点击评论键盘输入
    小程序wx.previewImage查看图片再次点击返回时重新加载页面问题
    js手机端判断滑动还是点击
    Proxy
    Reflect.has检测对象是否拥有某个属性
    简单的axios请求返回数据解构赋值
    为windows terminal 配置 conda
    git clone 遇到问题:fatal: unable to access 'https://github.comxxxxxxxxxxx':
  • 原文地址:https://www.cnblogs.com/sutengcn/p/271267.html
Copyright © 2011-2022 走看看