js获取滚动条滚动的距离

2024-08-19

原生js来写获取元素距离顶部距离，以及滚动条滚动指定距离和时间控制

这是我在写vue项目里封装的一个公共js类里面还有一些其他的方法,一并拿过来了 class Public { isDesktop(){ //判断是否为pc端 return (window.screen.width > 1023) ? true : false; } /* * formatMoney(s,type) * 功能:金额按千位逗号分隔 * 参数:s,需要格式化的金额数值. * 参数:type,判断格式化后的金额是否需要小数位. * 返回:返回格式化后的数值字符串. */ formatM

js获取滚动条距离浏览器顶部,底部的高度,兼容ie和firefox

做web开发经常会碰到需要获取浏览器的滚动条与顶部和底部的距离,然后做相应的处理动作.下面作者就如何通过js来获取浏览器滚动条距离浏览器顶部和底部的高度做一下分享,这个是同时兼容ie和firefox的. 获取窗口可视范围的高度 function getClientHeight(){ var clientHeight=0; if(document.body.clientHeight&&document.documentElement.clientHeight){ var clientHeig

js网页滚动条滚动事件实例分析

本文实例讲述了js网页滚动条滚动事件用法.分享给大家供大家参考.具体分析如下: 在做js返回顶部的效果时,要监听网页滚动条滚动事件,这个事件就是:window.onscroll.当onscroll事件发生时,用js获得页面的scrollTop值,判断scrollTop为一个设定值时,显示“返回面部” js网页滚动条滚动事件 ?1234567891011121314151617181920212223242526 <style type="text/css"> #top_di

JS实现滚动条滚到页面距离底部300px时执行事件的方法

scrollTop为滚动条在Y轴上的滚动距离. clientHeight为内容可视区域的高度. scrollHeight为内容可视区域的高度加上溢出(滚动)的距离 $(window).scroll(function(){ var scrollTop = $(this).scrollTop(); var scrollHeight = $(document).height(); var windowHeight = $(this).height(); if(scrollHeight-scrollTo

JS获取滚动条距离顶部高度

一.jQuery获取的相关方法 jquery 获取滚动条高度获取浏览器显示区域的高度 : $(window).height(); 获取浏览器显示区域的宽度 : $(window).width(); 获取页面的文档高度 : $(document).height(); 获取页面的文档宽度 :$(document).width(); 获取滚动条到顶部的垂直高度 : $(document).scrollTop(); 获取滚动条到左边的垂直宽度 : $(document).scrollLeft(); 计

javascript js获取html元素各种距离方法

//滚动条 scrollLeft//滚动条距左边距离 scrollTop//滚动条距顶部距离 scrollWidth//滚动条元素的宽 scrollHeight//滚动条元素的高 //可视范围 clientHeight//元素自身可视区域高 clientTop //this.clientW = document.documentElement.clientWidth;//可视宽 //this.clientH = document.documentElement.clientHeight;//可视

js禁止滚动条滚动，并且滚动条不消失，页面大小不变

//禁止滚动条滚动 function unScroll() { var top = $(document).scrollTop(); $(document).on('scroll.unable',function (e) { $(document).scrollTop(top); }) } //移除禁止滚动条滚动 function removeUnScroll() { $(document).unbind("scroll.unable"); } $('body').css('overf

原生js获取一个dom元素距离页面可视区域的位置值 -- getBoundingClientRect

getBoundingClientRect() 这个方法返回一个矩形对象,包含四个属性:left.top.right和bottom.分别表示元素各边与页面上边和左边的距离. var box=document.getElementById('box'); // 获取元素 alert(box.getBoundingClientRect().top); // 元素上边距离页面上边的距离 alert(box.getBoundingClientRect().right); // 元素右边距离页面左边的距离

js获取滚动条的宽度

function getScrollWidth() { var noScroll, scroll, oDiv = document.createElement("DIV"); oDiv.style.cssText = "position:absolute; top:-1000px; width:100px; height:100px; overflow:hidden;"; noScroll = document.body.appendChild(oDiv).clie

js模拟滚动条滚动

<!doctype html> <html> <head> <meta charset="utf-8"> <title>标题</title> <meta name="keywords" content=""> <meta name="description" content=""> <style> *

js 获取滚动条的高度以及设置滚动条的高度

//设置窗口滚动条高度 function setScrollTop(top){ if(!isNaN(top))document.body.scrollTop = top; } //取窗口滚动条高度 function getScrollTop(){ var scrollTop=0; if(document.documentElement&&document.documentElement.scrollTop){ scrollTop=document.documentElement.scrol

【笔记】jquery js获取浏览器滑动条距离顶部距离的写法

jq写法 $(window).scroll(function(){ var $top = $(document).scrollTop(); }); /*注:$(window).scroll(function(){})这个是窗口滑动事件*/ js写法 $(window).scroll(function(){ var top = document.body.scrollTop; });

封装scroll.js 获取滚动条的值

function Obj(){} Obj.prototype={ scroll:function(){ /* 主要是做兼容处理这里必须时!=null 因为默认值和每次滚动的时侯都可以值为0 但是 if(0)为假所以就只要不为null 就执行 */ if(window.pageYOffset!=null){ /*IE9 和其他标准浏览器*/ return { left:window.pageXOffset, top:window.pageYOffset } } /*声明了<!DOCTYPE

js获取滚动条的位置

页面具有 DTD,或者说指定了 DOCTYPE 时,使用 document.documentElement. 页面不具有 DTD,或者说没有指定了 DOCTYPE,时,使用 document.body. 在 IE 和 Firefox 中均是如此. 这个是兼容的方法: function ScollPostion() {//滚动条位置 var t, l, w, h; if (document.documentElement && document.documentElement.scrollT

js将滚动条滚动到指定位置的方法

代码如下(主要是通过设置Location的hash属性): <!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> <

js 获取滚动条事件

function getScroll() { return { left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0, top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0 }; } console.log(getScroll

js 获取滚动条的高度

function getScrollTop() { var scroll_top = 0; if (document.documentElement && document.documentElement.scrollTop) { scroll_top = document.documentElement.scrollTop; } else if (document.body) { scroll_top = document.body.scrollTop; } return scroll_

JS - 获取页面滚动的高度

document.documentElement.scrollTop||document.body.scrollTop

[Jquery] js获取浏览器滚动条距离顶端的距离

需要用js获取滚动条距离窗口顶端的距离和js获取浏览器可视化窗口的大小一.jQuery获取的相关方法 jquery 获取滚动条高度获取浏览器显示区域的高度 : $(window).height(); 获取浏览器显示区域的宽度 : $(window).width(); 获取页面的文档高度 : $(document).height(); 获取页面的文档宽度 :$(document).width(); 获取滚动条到顶部的垂直高度 : $(document).scrollTop(); 获取滚动条到

js获取浏览器滚动条距离顶端的距离

最近在做项目的时候遇到需要用js获取滚动条距离窗口顶端的距离和js获取浏览器可视化窗口的大小,在这儿做一个整理保存: 一.jQuery获取的相关方法 jquery 获取滚动条高度获取浏览器显示区域的高度 : $(window).height(); 获取浏览器显示区域的宽度 : $(window).width(); 获取页面的文档高度 : $(document).height(); 获取页面的文档宽度 :$(document).width(); 获取滚动条到顶部的垂直高度 : $(docu

js获取滚动条滚动的距离

热门专题