js滚动条多种样式,推荐

一外国佬写的。
有几种样式，点击那些example1234.html就能看见了。

可以研究一下下
http://www.n-son.com/scripts/jsScrolling/

赞 (0)

相关推荐

  • 判断滚动条到底部的JS代码

    判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop.clientHeight.scrollHeight. scrollTop为滚动条在Y轴上的滚动距离. clientHeight为内容可视区域的高度. scrollHeight为内容可视区域的高度加上溢出(滚动)的距离. 从这个三个属性的介绍就可以看出来,滚动条到底部的条件即为scrollTop + clientHeight == scrollHeight. 废话不多少说,赶紧上代码(兼容不同的浏览器). 复制代码 代码如下: /

  • js实现滚动条滚动到页面底部继续加载

    js实现滚动条滚动到页面底部继续加载

    这个实例应该说可以很简单,直接使用jQuery的方法来处理也是可以的.但本文底层使用原生的js来处理,遇到一些小知识点可以分析一下也算有所得. 原理很简单,就是为window添加一个scroll事件,浏览器每次触发scroll事件时判断是否滚动到了浏览器底部,如果到了底部则加载新数据.关键是计算滚动条是否滚动到了浏览器底部,算法如下 滚动条卷起来的高度 + 窗口高度 > 文档的总高度 + 50/*我这里将滚动响应区域高度取50px*/:如果这个判断为true则表示滚动条滚动到了底部. 实例 <

  • js监听滚动条滚动事件使得某个标签内容始终位于同一位置

    小知识点,废话不多说,直接上代码 css: 复制代码 代码如下: <pre name="code" class="css"><style> #anchor:{ position:absulate; top:40%; left:40%; width:100px; height:100px; background-color:red; } </style></pre><br> js: 复制代码 代码如下: &l

  • 当滚动条滚动到页面底部自动加载增加内容的js代码

    1,注册页面滚动事件,window.onscroll = function(){ }; 2,相关获取页面高度.滚动条位置.文档高度的函数: 复制代码 代码如下: //获取滚动条当前的位置 function getScrollTop() { var scrollTop = 0; if (document.documentElement && document.documentElement.scrollTop) { scrollTop = document.documentElement.s

  • js滚动条回到顶部的代码

    虽然平滑性处理的不好,但非常适合学习 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="tex

  • js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码

    获取浏览器窗口的可视区域高度和宽度,滚动条高度有需要的朋友可参考一下.IE中,浏览器显示窗口大小只能以下获取: 代码如下复制代码 复制代码 代码如下: document.body.offsetWidth document.body.offsetHeight 在声明了DOCTYPE的浏览器中,可以用以下来获取浏览器显示窗口大小: 代码如下复制代码 复制代码 代码如下: document.documentElement.clientWidth document.documentElement.cli

  • js DIV滚动条随机位置的设置技巧

    style后面用于限定DIV样式并加滚动条,这个不多说 关键的地方其实很简单,最后两行Javascript就是了,起作用的只有最后一行: obj.scrollTop=obj.scrollHeight*(Math.random()); obj.scrollTop:滚动条距离顶部的位置 obj.scrollHeight:流动区域的高度 Math.random():获得一个随机数 很简单,有人可能需要,用就拿去,哈哈 PS:IE6 / IE7 / FF2 测试通过 IE7在本地测试时只是每次打开时滚动

  • js滚动条多种样式,推荐

    一外国佬写的.有几种样式,点击那些example1234.html就能看见了. 可以研究一下下http://www.n-son.com/scripts/jsScrolling/

  • js改变css样式的三种方法推荐

    共用代码: <div id="div"> this is a div </div> var div=document.getElementById('div'); 第一种:用cssText div.style.cssText='width:250px;height:250px;border:1px red solid;'; 第二种:用setProperty() div.style.setProperty('width','250px'); div.style.s

  • JS之获取样式的简单实现方法(推荐)

    基本代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div{ color:yellow; } </style> </head> <body> <div style="width:100

  • JS设置CSS样式的方式汇总

    1. 直接设置style的属性  某些情况用这个设置 !important值无效 如果属性有'-'号,就写成驼峰的形式(如textAlign)  如果想保留 - 号,就中括号的形式  element.style['text-align'] = '100px'; element.style.height = '100px'; 2. 直接设置属性(只能用于某些属性,相关样式会自动识别) element.setAttribute('height', 100); element.setAttribute

  • JS常用字符串方法(推荐)

    JS常用字符串方法(推荐) <SPAN style="FONT-FAMILY: 'courier new', courier">var str01 = "odd open xboxone" , str02 = "hey"; var str03; var num = 15; </SPAN> // 以下省略前半部分的 " str01. " (部分不是这个喔) charAt(num) // 得到指定索引位置的

  • JS实现的样式切换功能tableCSS实例

    本文实例分析了JS实现的样式切换功能tableCSS.分享给大家供大家参考,具体如下: 把前阵子写的JQ插件函数(alterBgColor )改写成不基于JQ的代码,还添加了一个click样式效果 代码风格还是按照JQ插件风格来写,使用了闭包来循环设置TR元素的样式 function TableCss(options){ //如果没参数,就退出 if(arguments.length < 1 || !document.getElementById(options.tableName) ) { r

  • 一个容易犯错的js手机号码验证正则表达式(推荐)

    写一个简单的正则表达式,用来校验11位手机号码,开头允许是13.15.18,我一开始这样写: var reg = /^(13[0-9]{9})|(15[0-9]{9})|(18[0-9]{9})$/; 运行发现,即使是 13988888877157777,也能通过验证,这说明这个写法错了,我的本意是希望这样: ^(13[0-9]{9})$ 或者 ^(15[0-9]{9})$ 或者 ^(18[0-9]{9})$ 所以正确写法是:var reg = /^1[358][0-9]{9}$/;这样才能保证

  • js实现class样式的修改、添加及删除的方法

    本文实例讲述了js实现class样式的修改.添加及删除的方法.分享给大家供大家参考.具体分析如下: 比较常见的js前端功能,通过修改标签的className实现相应的功能. 具体代码如下: 复制代码 代码如下: <table> <tbody> <tr> <td>js实现class的样式的修改.添加.删除</td> <td>  <a e_value="g_sn" ename="商品编码" c

  • 原生js更改css样式的两种方式

    原生js更改css样式的两种方式

    下面我给大家介绍的是原生js更改CSS样式的两种方式: 1. 通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3  "的方式直接更改CSS样式. 2. 先在CSS样式表中对特定的类如"active类"设置样式(这里的active类是假定的,暂时不存在),然后再在javascript代码中通过node.classname="active"使得CSS样式表中对active类的样式设

  • JS获取CSS样式（style/getComputedStyle/currentStyle）

    CSS的样式分为三类: 内嵌样式:是写在Tag里面的,内嵌样式只对所有的Tag有效. 内部样式:是写在HTML的里面的,内部样式只对所在的网页有效. 外部样式表:如果很多网页需要用到同样的样式(Styles),将样式(Styles)写在一个以.css为后缀的CSS文件里,然后在每个需要用到这 些样式(Styles)的网页里引用这个CSS文件. getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值.返回的是一个CSS样式对象([object CSSStyleDeclar

随机推荐