scrolltop

jquery scrollTop() 方法

由 吃可爱长大的小学妹 提交于 2019-11-29 05:15:54
原文地址: http://www.w3school.com.cn/jquery/css_scrolltop.asp 实例 设置 元素中滚动条的垂直偏移： $(".btn1").click(function(){ $(“div”).scrollLeft(100); }); 亲自试一试 定义和用法 scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。 scroll top offset 指的是滚动条相对于其顶部的偏移。 如果该方法未设置参数，则返回以像素计的相对滚动条顶部的偏移。 语法 $(selector).scrollTop(offset) 参数 描述 offset 可选。规定相对滚动条顶部的偏移，以像素计。 来源： https://www.cnblogs.com/LeesinDong/p/10835599.html

offset() position() scrollTop() scrollLeft()

由 浪尽此生 提交于 2019-11-29 05:15:37
（1）offset：获取当前元素相对于文档的高度。只对可见元素有效。 　　 不管该元素如何定位，也不管其父元素如何定位，都是获取的该元素相对于当前视口的偏移 (2) position:获取元素相对于最近的一个position为relative or absolute的元素的祖父节点的相对偏移。 　　 事实上是把该元素当绝对定位来处理，获取的是该元素相当于最近的一个拥有绝对或者相对定位的父元素的偏移位置, 如果其所有的父元素都为默认定位（static）方式，则其处理方式和offset()一样，是当前窗口的相对偏移 （3）scrollTop/scrollLeft:是分别获取元素滚动条距顶端的距离。 --------------------------------------------------------------------------------------------------------------------------------------- offsetLeft，scrollLeft，offsetTop，scrollTop等等的用法 clientX 设置或获取鼠标指针位置相对于 当前窗口 的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。 clientY 设置或获取鼠标指针位置相对于 当前窗口 的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。

css方法

由 ╄→гoц情女王★ 提交于 2019-11-29 03:51:26
width() height() innerWidth() 包含内边距（padding） outerWidth()包含内边距和边框( padding border) offset() 获取某个元素相对于浏览器窗口(可视区域的距离) position()获取某个元素相对于父元素的偏移距离 scrollTop()获取垂直滚动条的值； scrollTop(value)设置垂直滚动条的值; scrollLeft()获取水平滚动条的值； scrollLeft(value)设置水平滚动条的值; 来源： https://www.cnblogs.com/bushaonian/p/11444604.html

轮播无限向上滚动

由 谁都会走 提交于 2019-11-29 03:31:10
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="jquery-1.9.0.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> *{ margin: 0; padding: 0; } li{ list-style: none; } #top{ width: 50px; height: 100px; border: 1px solid #f00; margin: 100px auto; line-height: 20px; overflow: hidden; position: relative; /*top: 0;*/ } /*.top{ top: 0; position: absolute; left: 0; }*/ /*.top .ul1{ position: absolute; left: 0; top: 0; } .top .ul2{ position: absolute; left: 0; top: 180px; }*/ </style> </head> <body> <div id="top"> <div id="ul1"> <ul> <li>11</li>

JS实现文字向上无缝滚动轮播

由 此生再无相见时 提交于 2019-11-29 03:27:27
效果图： 全部代码： <!DOCTYPE html> < html lang = " en " > < head > < meta charset = " UTF-8 " > < meta name = " viewport " content = " width=device-width, initial-scale=1.0 " > < meta http-equiv = " X-UA-Compatible " content = " ie=edge " > < title > Document </ title > < style > * { margin : 0 ; padding : 0 } #box { height : 140px ; border : solid 1px ; overflow : hidden ; } </ style > </ head > < body > < div id = " box " > < ul id = " ul1 " > < li > 1111111111111111111111 </ li > < li > 2222222222222222222222 </ li > < li > 3333333333333333333333 </ li > < li > 4444444444444444444444 </ li > < li >

Vue详情页回列表页保存原数据与位置。

由 爱⌒轻易说出口 提交于 2019-11-29 01:35:52
列表页关键代码 mounted() { //非从详情页返回时正常加载数据 if (!this.$route.meta.isBack) { //执行加载数据的方法 //重新加载页面 } else { // this.onFetching = true; this.curPage = sessionStorage.getItem('curPage'); //存储分页第几页，用于返回列表页继续可以分页 ... } //执行完初始化isBack this.$route.meta.isBack = false }, beforeRouteLeave(to, from, next) { if(to.name == 'bbs_detail') { //跳转为详情页，就保存当前滚动的页数 sessionStorage.setItem('curPage', this.curPage); } else { //跳转为非详情页，滚动的页数归1 sessionStorage.setItem('curPage', 1); } next(); }, main.js // 返回定位 router.afterEach((to,from) => { let path = to.path; //判断需要定位的路由地址 if(path == '/bbs'){ //获取储存起来的位置 let scrollTop =

How to get maximum document scrolltop value

由 雨燕双飞 提交于 2019-11-29 01:27:44
I am making some plugin and I need to get maximum scrollTop value of the document. Maximum scrollTop value is 2001 , but $(document).height() returns 2668 and $('body')[0].scrollHeight gives me undefined . How to get 2001 through javascript/jquery?! The code in your comments should work: $(document).height() - $(window).height() Here's an example that alerts when you scroll to the maximum scroll position: http://jsfiddle.net/DWn7Z/ If you want to "guess" the maximum scrolltop value, maybe you should compare the height of the document and the viewport height (size of your window). /** * Return

scrollTop() returns 0 in Firefox, but not in Chrome

由 风格不统一 提交于 2019-11-29 01:00:55
Not sure if there's another question regarding this, if so I apologize and please don't release the hounds. Using the html5 doctype and doing a quick console.log off my scroll listener that tells me the value of scrollTop() value. I'm basically doing this so when I scroll past a point, I change the opacity of an element. I'm doing this using an MVS solution and I don't have the ability to push this to an external site so you can look. Here's a quick snippet: var opacity = 1; var scrollTop = $('body').scrollTop(); if (scrollTop > 200) { opacity = 0.1; } $('#element).css('opacity', opacity); If

bom-倒计时

由 ≯℡__Kan透↙ 提交于 2019-11-28 18:06:01
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .time-item { width: 430px; height: 45px; margin: 0 auto; } .time-item strong { background: orange; color: #fff; line-height: 49px; font-size: 36px; font-family: Arial; padding: 0 10px; margin-right: 10px; border-radius: 5px; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2); } .time-item > span { float: left; line-height: 49px; color: orange; font-size: 32px; margin: 0 10px; font-family: Arial, Helvetica, sans-serif; } .title { width: 260px; height: 50px; margin:200px auto 50px auto; } <

pageX的兼容性处理1

由 坚强是说给别人听的谎言 提交于 2019-11-28 17:33:13
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body { height: 1000px; } </style> </head> <body> <script> // e.clientX/e.clientY 鼠标在可视区域中的位置 // // e.pageX/e.pageY 鼠标在页面中的位置 有兼容性问题 从IE9以后才支持 // pageY = clientY + 页面滚动出去的距离 document.onclick = function () { // // 输出页面滚动出去的距离 // console.log(document.body.scrollLeft); // console.log(document.body.scrollTop); // // documentElement 文档的根元素 html标签 // // console.log(document.documentElement); // // 有些浏览器 是使用这两个属性来获取的 // console.log(document.documentElement.scrollLeft); // console.log(document.documentElement
订阅 scrolltop