窗体内容滚动及获取滚动条的偏移值

最新推荐文章于 2024-08-21 11:07:47 发布
最新推荐文章于 2024-08-21 11:07:47 发布
阅读量2.6k 收藏
点赞数
分类专栏： Javascripot 文章标签： 浏览器 function xhtml javascript css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/guansong8079776/article/details/5492923
版权

<!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></title>

 

    <script language="javascript">

        window.onscroll = function()

        {

           //获取滚动条的值

            var scrollPos;

            if (typeof window.pageYOffset != 'undefined')//window.pageYOffset是NS专用属性，它的含义和IE下的document.body.scrollTop一样 

            {

                scrollPos = window.pageYOffset;

            }

 

            //当前浏览器采用的渲染方式。 

            //主要是浏览器的模式，有两个：BackCompat，CSS1Compat。其中前者是怪异模式，后者是标准模式。 

            //IE默认是BackCompat模式，Gecko内核的浏览器只在table中图片层上不同，可以看为CSS1Compat标准模式 

            //document.compatMode等于BackCompat时，浏览器客户区宽度是document.body.clientWidth； 

            //当document.compatMode等于CSS1Compat时，浏览器客户区宽度是document.documentElement.clientWidth。 

            //浏览器客户区高度、滚动条高度、滚动条的Left、滚动条的Top等等都是上面的情况。 

            else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat')

            {

                scrollPos = document.documentElement.scrollTop;

            }

            else if (typeof document.body != 'undefined')

            {

                scrollPos = document.body.scrollTop;

            }

            document.getElementById("divtest").innerHTML = scrollPos +";渲染模式"+ document.compatMode;

        }

       //滚动函数

        function gundong(y)

        {

            scrollBy(0, y); //window.scrollBy(x,y)控制页面滚动，x、y分别表示横向与纵向滚动的距离，单位是象素px

        }

    </script>

 

</head>

<body>

<input type="button" οnclick="gundong(500);" value="滚动" />

    <br />

    <div style="position: fixed" id="divtest">

    </div>

    <div style="width:100%; height:3000px"></div>

    </body></html>

guansong8079776
关注
专栏目录
chrome 窗体高度_js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
weixin_30667831的博客
02-01 521
如下所示：screen.widthscreen.heightscreen.availHeight //获取去除状态栏后的屏幕高度screen.availWidth //获取去除状态栏后的屏幕高度一、通过浏览器获得屏幕的尺寸二、获取浏览器窗口内容的尺寸//高度window.innerHeight || document.documentElement.clientHeight || document...
Python——Tkinter，滚动条Scrollbar（水平+垂直）的实现
lavender_dream的博客
11-22 2万+
文章目录前言Python——Tkinter 滚动条 Scrollbar的实现（水平+垂直一起）一、引入包，初始化Scrollbar二、创建滚动条Scrollbar的控制控件（以Treeview为例），并将滚动条与控件绑定三、Treeview与Scrollbar的移动位置同步  喜欢与热爱不是一回事儿，sincerely，end. 前言   对于Python Tkinter的滚动条Scrollbar组件，参看了很多资料，都觉得一头雾水，实验多次之后的结论，如有错误，请纠正，万分感谢！ Python——T
winform下带滚动条的panel
10-16
前两天偶尔需要一个winform下带滚动条的panel，在网上找了许久没有找到相关比较好用的资料，只好自己随便琢磨了琢磨。 现在这个小东西功能很简单，在panel中加入元素，超过panel范围有滚动条，对其中元素能够进行简单的添加、删除和定位（这里用到的是竖向的滚动条，所以用的是AutoScrollPosition.Y，横向的谁用到谁自己琢磨该是什么吧，更复杂一点的定位也需要大家自己去计算分析） 功能特别简单，而且只是一个空架子，所以三分比较多了。但是我喜欢事不过三那句话，所以我所有的资源都是3分，也许本身的价值都是负分，主要是花钱不多图个娱乐的意思 如果对大家多少有点用处一切好说，如果不小心浪费了同志们宝贵的下载积分，只管留言痛骂我好了。 反正本人来这里不是很频繁，因为积分太少，这里的东西但凡有点用处的所需积分又太多。本人水平实在太差，这里的都足以做我的老师，所以也没有什么东西拿出来献丑，自惭形秽之下我只好少来，所以想来也许我应该不怕骂的。 当然，最重要的原因是本人从小到现在：自己尚无明确意识所以也不怎么有记忆的几年、上学十几年、工作十几年几乎一直都是在骂声中度过的。所以对骂声即便没有完全麻木，想来多少还是有点承受能力的
滚动条偏移
zhang的博客
07-09 2093
JS获取位置、滚动条、尺寸的总结
最新发布
凌凌的博客
08-21 364
任何 DOM 对象都可以用，传入两个参数，在原来的基础上增加多少。：任何 DOM 对象都可以用，传入两个参数，设置滚动条的绝对位置。：获取或设置 DOM 元素的竖向滚动条距离。：获取或设置 DOM 元素横向滚动条的距离。如果要获取整个网页，要么获取。
JavaScriptAPI_offset（偏移量）、client（可视区）和 scroll（滚动）
热门推荐
JiuMeilove的博客
06-22 2万+
偏移量(offset dimension)是javascript中的一个重要的概念。涉及到偏移量的主要是offsetLeft、offsetTop、offsetHeight、offsetWidth这四个属性。当然，还有一个偏移参照——定位父级offsetParent。 　　 在理解偏移大小之前，首先要理解offsetParent。人们并没有把offsetParent翻译为偏移父级，而是翻译成定位父级，很大原因是offsetParent与定位有关定位父级offsetParent的定义是：与当前元素最近的经过定位
js 滚动条 scroll属性/事件 兼容滚动条方法 获取滚动条信息 操作滚动条(scroll() scrollTo() scrollBy()) 获取窗口滚动条偏移量
weixin_42448623的博客
10-26 1685
window.pageXOffset/pageYOffset x轴/y轴 滚动距离 IE8及以下不兼容 IE8 及以下浏览器 支持 兼容性比较混乱 用时取2个值相加，因为两个值不可能同时存在 一个存在，另一个必然为0 document.body.scrollLeft/scrollTop document.documentElement.scrollLeft/scrollTop 封装 兼容滚动条...
element表格的有滚动条时产生错位或者偏移(记录一下）
weixin_45838544的博客
03-15 863
element官网上 el-table 在header中会生成一个class名为gutter的th元素，并设置宽度为滚动条的宽度进行占位，手动修改table header样式就可以了。可能是element的版本的原因。但目前使用版本并未生成此元素。
JavaScript添加随滚动条滚动窗体的方法
10-22
在讨论如何使用JavaScript实现窗体随滚动条滚动的效果前，我们先来理解一下文档中所提供的两种实现方式所涉及的核心知识点。 首先，JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言，其使得网页不再是...
elementUI滚动条,点击dom元素滚动到指定位置.pdf
12-16
我们使用 `ref` 属性来获取滚动条组件的引用，然后使用 `setScrollLeft` 方法来设置滚动条的滚动位置。 实现细节 在这个例子中，我们使用 Vue.js 的 Composition API 来实现滚动条的功能。我们首先定义了一个 `...
如何隐藏滚动条还能实现滚动的功能
ad775202的博客
04-01 607
有时候，我们需要用到滚动条的功能，但是又不需要展示出滚动条给用户看这种奇葩的需求，那么我们要怎么来实现呢？下面我提供了两种方案，适用于pc端、也适用与移动端。 第一种方案，通过样式来隐藏原生的滚动条，下面提供了两种方式，但是这样会导致偶现原生样式的情况 <!doctype html> <html lang="en"> <head> ...
C#滚动条使用总结
02-01
对C#的滚动条使用进行了由浅入深的总结，并附有完整的测试代码
得到页面偏移位置（滚动条偏移位置）
11-08 1353
/** * 得到页面偏移位置（滚动条偏移位置） * */ function getPageOffset(){ var pageOffset={}; if(window.innerWidth){ pageOffset.x=window.pageXOffset; pageOffset.y=window.pageYOffset;
Jquery怎么获取元素文档大小、偏移、位置和滚动条位置
adobe1992
07-07 5153
因为浏览器的兼容问题，如果使用javascript获取这些数值是一个相当痛苦的过程。好在jqeury提供了假单优雅，并且兼容的解决方法。 1.获取浏览器和页面文档的宽度和高度 //获取浏览器显示区域的高度 $(window).height(); //获取浏览器显示区域的宽度 $(window).width(); //获取页面文档的高度 $(do
再谈弹窗那些事
weixin_34233679的博客
07-28 208
2019独角兽企业重金招聘Python工程师标准>>> ...
JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
xuxuechao6的博客
10-28 434
//获取浏览器显示区域的高度  $(window).height();  //获取浏览器显示区域的宽度  $(window).width();  //获取页面的文档高度  $(document.body).height();  //获取页面的文档宽度  $(document.body).width();  获取滚动条的位置  复制代码代码如下: //获取
cocoscreator实现拖动Scrollbar设置ScrollView滚动视图位置
Lu1030017255的博客
03-25 2929
//node 滚动条节点，监听scrollbar节点的触摸移动事件 //scrollView 滚动节点，设置滚动位置 this.node.on('touchmove', function (event) { //获取一下当前的滚动视图的可滚动的最大偏移量 let maxScrollOffset = this.scrollView.getMaxScrollOffset(); //>0表示可进行滚动 //i.
JS获取页面滚动距离
qq_40147756的博客
06-30 4194
获取或设置一个元素的内容垂直滚动的像素数。返回文档在垂直方向已滚动的像素值。
VB实现窗体滚动条的非控件API方法
资源摘要信息: "该资源提供了关于如何在Visual Basic (VB)中为窗体添加滚动条的详细信息。具体而言，它不是通过使用标准控件的方式，而是通过调用系统API来实现的。在处理窗体滚动条时，API调用允许开发者以一种更加...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值