JavaScript-实现滚动条

javascript自定义滚动条插件，几行代码的事儿

在实际项目中,经常由于浏览器自带的滚动条样式太戳,而且在各个浏览器中显示不一样,所以我们不得不去实现自定义的滚动条,今天我就用最少的代码实现了一个自定义滚动条,代码量区区只有几十行,使用起来也非常方便. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title…

原声JavaScript实现滚动条·改1

修正了获取元素相对视口左距离的逻辑问题(之前的函数实际获取的是相对于页面左距离).去除了调试时忘记删除的mouseleave事件.将创建滚动条的功能单独列为一个函数. 添加了鼠标点在滚动条什么位置,就立即卷动到什么位置的功能:添加了键盘左右键滚动的功能(滚动距离为一个内容页面) <!DOCTYPE html> <html> <head> <title>A demo</title> <meta http-equiv="content…

javascript实现滚动条滚动加载内容

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>demo</title> <…

【转】Selenium 利用javascript 控制滚动条

http://luyongxin88.blog.163.com/blog/static/92558072011101913013149/ < xmlnamespace prefix ="o" ns ="urn:schemas-microsoft-com:office:office" /> 在工作中,遇到这样的问题,注册时的法律条文需要阅读,判断用户是否阅读的标准是:滚动条是否拉到最下方.以下是我模拟的2种情况: 1. 滚动条在上方时,点击su…

javascript 获取滚动条高度+常用js页面宽度与高度

/******************** * 取窗口滚动条高度 ******************/function getScrollTop(){ var scrollTop=0; if(document.documentElement&&document.documentElement.scrollTop) { scrollTop=document.documentElement.scrollTop; } else if(documen…

原生JavaScript实现滚动条

没事找事,明明overflow:scroll|auto就可以,只是难看点(实际上css也能设置).只当练习写拖拽.监听事件.位置检测了. 原理是对滑动条块进行监听,按下鼠标按键后,监听鼠标移动,然后根据滑动条块移动的百分比算出滚动区域的滚动程度,用marginLeft进行滚动.具体的写在注释里. 整体弄成了一个对象,防止各种乱七八糟的数据污染全局变量.另外,对象内部调用的函数也都写到了对象构造函数的里面,由于对象作用域链的原理,外部无法进行调用,防止不小心在外部调用. <!DOCTYPE htm…

javascript 获取滚动条高度+常用js页面宽度与高度（转）

/******************** *获取窗口滚动条高度 ******************/ function getScrollTop() { var scrollTop=0; if(document.documentElement&&document.documentElement.scrollTop) { scrollTop=document.documentElement.scrollTop; } else if(document.body) { scrollTop=d…

javascript控制滚动条的位置，获取控件的位置

一.如下是定位鼠标在视窗中的位置,先定位视窗和页面直接的距离. function getMousePoint() { var point = {x:0,y:0}; // 如果浏览器支持 pageYOffset, 通过 pageXOffset 和 pageYOffset 获取页面和视窗之间的距离 if(typeof window.pageYOffset != 'undefined') { point.x = window.pageXOffset; point.y = window.pageYOff…

javascript获取滚动条位置（兼容所有浏览器）

有两种方式来获取浏览器滚动条的位置第一种:document.documentElement.scrollTop 第二种:$("body").scrollTop() 第一种方式能够兼容FireFox和IE,但是chrome下取的值永远是0,而第二种能够兼容Chrome,但在IE和FireFox下取的值永远是0 所以最准确取位置的方法是: if($.browser.webkit) { scTop = $("body").scrollTop(); }else { scT…

闲扯 Javascript 04 滚动条

物体运动基础让Div移动起来 offsetLeft的作用用定时器让物体连续移动效果原理让ul一直向左移动复制li innerHTML和+= 修改ul的width 滚动过界后,重设位置判断过界改变滚动方向修改speed 修改判断条件鼠标移入暂停移入关闭定时器移出重新开启定时器 <style> *{ margin:0px; padding:0px;} #div1{ width:712px; height:108px; margin:100px auto; position:r…

javascript 获取滚动条距离顶部的位置(兼容所有的)。

function getScrollTop() { var scrollPos; if (window.pageYOffset) { scrollPos = window.pageYOffset; }else if (document.compatMode && document.compatMode != 'BackCompat') { scrollPos = document.documentElement.scrollTop; } else if (document.body) {…

js和jquery获取文档对象以及滚动条位置

<div style="width:120px;height:120px;border:1px solid red; position:absolute; left:800px; top:100px; z-index:1001;" id="AdminUserStateDiv"> </div> <div class="div1">层1</div><di…

Html body的滚动条禁止与启用

在写一个在页面中,经验证用户没有登录或session失效时候弹出登录框禁止页面滚动用到今天搞了一个功能,上下左右居中,模仿QQ空间里的样式,把横向和纵向滚动条禁止掉代码如下:<script type="text/javascript"> //禁止滚动条 $(document.body).css({ "overflow-x":"hidden", "overflow-y":"hidden" …

滚屏加载--jQuery+PHP实现浏览更多内容

滚屏加载技术,就是使用Javascript监视滚动条的位置,每次当滚动条到达浏览器窗口底部时,触发一个Ajax请求后台PHP程序,返回相应的数据,并将返回的数据追加到页面底部,从而实现了动态加载,其实就是一个典型的Ajax应用.本文将使用jQuery,结合PHP,mysql以及JSON,为您讲解如何应用滚屏加载技术到您的项目中去.当然,阅读本文的前提是您需要有jQuery和PHP相关基础. index.php 我们默认要显示15条数据,因此,我们先从数据库取开始的15条数据显示在页面.后面新加载…

工作中经常用到github上优秀、实用、轻量级、无依赖的插件和库

原文收录在我的 GitHub博客 (https://github.com/jawil/blog) ,喜欢的可以关注最新动态,大家一起多交流学习,共同进步,以学习者的身份写博客,记录点滴. 按照格式推荐好用的插件有福利哦,说不定会送1024论坛邀请码,好自为之,你懂的,嘿嘿嘿. 由于github的issues没有TOC菜单栏导航,所以这里方便大家查看,先安利一款Chrome浏览器的插件,感谢github用户@BBcaptain 推荐.点击我呀,进入商店,自备梯子,如果不会FQ,赶紧转行... 效果…

H5 页面下拉加载更多

1.html页面: <body onload="index_roll()"> ... </body> 2.js <script type="application/javascript"> //获取滚动条当前的位置 function getScrollTop() { var scrollTop = 0; if (document.documentElement && document.documentElement…

解析JS运动

解析JS运动物体运动原理:通过改变物体的位置,而发生移动变化. 任何运动都是相对的,就像物理中的运动公式:s(要达到的)=s0(当前的样式值)+vt. 方法: 1.运动的物体使用绝对定位 2.通过改变定位物体的属性(left.right.top.bottom)值来使物体移动.例如向右或左移动可以使用offsetLeft(offsetRight)来控制左右移动.步骤: 1.开始运动前,先清除已有定时器 (因为:是连续点击按钮,物体会运动越来越快,造成运动混乱) …

scrollTop兼容处理

使用jQuery2.0以下版本的scrollTop()函数来设置当然兼容性当然很好,但有时需要为滚动设置滑动效果.比如,使用animate函数,这里需要做些兼容性处理: 实例:http://sandbox.runjs.cn/show/pji9exa3 代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Doc…

layui导航的使用

在项目开发的时候,需要后台的系统好看点,左边的导航需要设计为多级的,而且要点击当前的链接页面,刷新后要实现选中状态学习源头:http://www.layui.com/doc/element/nav.html 使用layui的导航面包屑 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta name="viewport" content="width=device-wi…

爬虫之Selenium库

官方文档:https://selenium-python.readthedocs.io/ Selenium:自动化测试工具,支持多种浏览器.爬虫中主要用来解决JavaScript渲染的问题. 一.开始基本使用 from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.common.keys import Keys from selenium.webdriv…

jquery的返回顶端的功能实现

页面很长的时候,读到最下面,需要返回顶端,则在页面最下面布局一个返回顶部的图标很有用. 具体功能是,jquey控制,向下滚动出现返回顶部图片,若滚动返回顶部或点回顶部,则图标消失. 实现效果如下图:…

工作中经常用到 github 上优秀、实用、轻量级、无依赖的插件和库

原文收录在 GitHub博客 ( https://github.com/jawil/blog ) ,喜欢的可以关注最新动态,大家一起多交流学习,共同进步,以学习者的身份写博客,记录点滴. 由于github的issues没有TOC菜单栏导航,所以这里方便大家查看,先安利一款Chrome浏览器的插件,感谢github用户@BBcaptain 推荐.点击我呀,进入商店,自备梯子,如果不会翻墙,赶紧转行... 效果预览,是不是很方便,图片较多,建议等待一会或者多刷新几下: Echo.js – 简单易用的…

php+ajax实现无刷新动态加载数据技术

我们浏览有些网页的时候,当拉动浏览器的滚动条时到页底时,页面会继续自动加载更多内容供用户浏览.这种技术我暂且称它为滚屏加载技术.我们发现很多网站用到这种技术,必应图片搜索.新浪微博.QQ空间等将该技术应用得淋漓尽致. 滚屏加载技术,就是使用Javascript监视滚动条的位置,每次当滚动条到达浏览器窗口底部时,触发一个Ajax请求后台PHP程序,返回相应的数据,并将返回的数据追加到页面底部,从而实现了动态加载,其实就是一个典型的Ajax应用.本文将使用jQuery,结合PHP,mysql以及JS…

JavaScript自定义浏览器滚动条兼容IE、火狐和chrome

今天为大家分享一下我自己制作的浏览器滚动条,我们知道用css来自定义滚动条也是挺好的方式,css虽然能够改变chrome浏览器的滚动条样式可以自定义,css也能够改变IE浏览器滚动条的颜色.但是css只能是改变IE浏览器的颜色,而且CSS不能做到改变火狐浏览器的样式和颜色.所以只能是通过JavaScript来实现了.也有插件可以做到.我分享一下我自己使用原生JavaScript实现的思路.先上个图看下效果: JavaScript实现的思路就是模拟浏览器自身滚动条.我制作的思路是先将整个文档放在一…

javascript 学习之自定义滚动条加滚轮事件

要自己写一个自定义滚动条加上滚轮事件,之前的没有滚轮事件不完整,今天整理了一个. 1.滚轮事件是不兼容的,firefox中是必需要用事件绑定的添加,用的DOMMouseScroll,当滚动鼠标的时候,只要鼠标滚动的方法就行了,而这通过检测datail的正负号就可以确定 2.其他的用mousewheel(Ie是onmousewheel),通过检测wheelDelta <!doctype html> <html> <head> <title>拖拽-加滚轮<…

JavaScript滚动条插件源码

这是过年的时候自己写的js滚动条插件的源码,做出的效果自己并不满意,正因为做的并不满意所以回头重新巩固和深入学习js,这个插件有如下几个不太满意的地方: 内容的过度效果,可以参阅QQ客户端最近会话列表里的滚动条,它的滚动非常的平滑,简单的说就是缺少动画过渡效果. 并不算完美的兼容性,在IE6.7下的style仍然有点缺憾. 样式的不完美,例如鼠标悬浮才显示滚动条,移除后隐藏这种效果都没有写. 内部结构的混乱,需要调整内容结构. 滚动条那个图片毕竟不是美工,自己切图切的真是恶心到爆了...囧总体…

JavaScript学习笔记- 自定义滚动条插件

此滚动条仅支持竖向(Y轴) 一.Css /*这里是让用户鼠标在里面不能选中文字,避免拖动的时候出错*/ body { -moz-user-select: none; /*火狐*/ -webkit-user-select: none; /*webkit浏览器*/ -ms-user-select: none; /*IE10*/ -khtml-user-select: none; /*早期浏览器*/ user-select: none; } /*滚动文本及滚动条大框*/ .scroll_con { w…

JavaScript学习笔记-自定义滚动条

这是一个基本实现思路,如果有新手和我一样没什么事,喜欢瞎研究话,可以参考下. 一.Html <div class="scroll_con"> <div class="scroll_text"> 这里是你的需要显示在滚动条框内文本内容...... </div> </div> 二.Css /*这里是让用户鼠标在里面不能选中文字,避免拖动的时候出错*/ body { -moz-user-select: none; /*火狐*…

JavaScript学习笔记-元素在滚动条滑动一定高度后自动置顶

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta charset="utf-8" /> <style type="text/css"> *…

javascript设置网页刷新或者重新加载后滚动条的位置不变

有个同事说再javascript中你可以做任何你想做的事情,当时觉得不以为然,今天遇到个问题,就是页面重新加载后总是回到页面的顶部,如果客户只想看到他想看到的部分是怎么变化的,这个体验就好了.原本想象应该有页面设置scroll之类的,没有看到,在网上搜到一个方法就是在页面加载前用cookie记录滚动条的位置,加载之后从cookie中取回这个值再设置滚动条的位置,这个方法如此风骚. window.onbeforeunload = function(){ var scrollPos; if (typ…

【JavaScript-实现滚动条】的更多相关文章