滚动条相关1

1.页面文档滚动条 获取和判断

            //1.获取浏览器可视区域的高度
            $(window).resize(function () {
                //使用js
                //var clientHeight = scrollHelper.getClientHeight();

                //使用 jquery
                var clientHeight = $(window).height();

                $(".divFixed").text(clientHeight);
            });

            //2.获取浏览器文档的高度
            $(window).resize(function () {
                //使用js
                //var docHeight = scrollHelper.getScrollHeight();

                //使用jQuery
                var docHeight = $(document).height();

                $(".divFixed").text(docHeight);
            });
            //3.判断当前 滚动条是否 最高,或最低
            $(window).scroll(function () {
                //1.获取当前滚动条位置
                var scrollTop = $(window).scrollTop();
                var difference = $(document).height() - $(window).height();

                if (scrollTop == 0) {
                    $(".divFixed").text("滚动条到了顶端");
                }
                else if (scrollTop == difference) {
                    $(".divFixed").text("滚动条到了底端");
                } else {
                    $(".divFixed").text(scrollTop);
                }
            });

            //4.jquery 动画滚动到 浏览器 顶端
            $(‘.divFixed‘).click(function () {
                $(‘body,html‘).stop(true, false).animate({ scrollTop: 0 }, 1500);
            });

            //5.jquery 动画滚动套 浏览器 底端
            $(‘.divFixed‘).click(function () {
                var difference = $(document).height() - $(window).height();
                $(‘body,html‘).stop(true, false).animate({ scrollTop: difference }, 1500);
            });

2.Div滚动条 获取和判断

            var divOne = $(‘.divOne‘);
            var divTwo = $(‘.divTwo‘);
            //1.获取div的滚动条的
            $(".divTwo").scroll(function (e) {
                var scrollTop = divTwo.scrollTop();

                ////2.获取div的 内容的高度(目前不可用)
                //var scrollHeight = divTwo.innerHeight();

                divOne.text(scrollTop);
            });
            //2.判断滚动条 是否到了底部
            var scrollHeight = 0;//滚动条距离总长
            var scrollTop = 0;//当前滚动条位置
            $(".divTwo").scroll(function () {
                var height = $(this).height();

                scrollHeight = $(this)[0].scrollHeight;
                scrollTop = $(this).scrollTop();

                if (scrollTop + height >= scrollHeight) {
                    divOne.text("滚到底部了");
                }
                else if (scrollTop == 0) {
                    divOne.text("到顶端了");
                }
            });
时间: 2024-11-05 19:31:22

滚动条相关1的相关文章

滚动条相关整理

IE下的滚动条样式 IE是最早提供滚动条的样式支持,好多年了,但是其它浏览器一直没有支持,IE独孤求败了. 这些样式规则很简单: scrollbar-arrow-color: color; /*三角箭头的颜色*/ scrollbar-face-color: color; /*立体滚动条的颜色(包括箭头部分的背景色)*/ scrollbar-3dlight-color: color; /*立体滚动条亮边的颜色*/ scrollbar-highlight-color: color; /*滚动条的高亮

win32: 查询滚动条相关信息的注意事项

今天打算判断一个窗口是否出现垂直滚动条,我的代码: SCROLLINFO si; //滚动条信息结构体                    si.cbSize = sizeof(SCROLLINFO); //必须                    si.fMask = SIF_ALL;                    GetScrollInfo(hwnd_frame_preview, SB_VERT, &si); printf("si.nPage:%d\n", si

jQuery 的 Div 标签滚动条属性及判断垂直滚动条是否到达底部

转自:http://blog.163.com/[email protected]/blog/static/1284651702010894509982/ 关于 jQuery 的 Div 标签的滚动条的概念,没有几个人能够完全.正确搞明白的. 我知道很多人不同意我的观点.但是如果去百度上搜素,与 jQuery 滚动条有关的信息,都是关于滚动条外观和滚动条插件的.我最近在制作一个滚动条相关的页面效果,去 CSDN 论坛里提问,得到了一段代码,还是错误的. jQuery 里和滚动条有关的概念很多,但是

浏览器滚动条

做网站时发现登录成功后浏览器滚动条消失无法滚动页面 通过观察和调试,发现是强制隐藏了bootstrap的模态框后,body的overflow变为了hidden,同时也多了一个17px的右内边距, 无法调用出垂直滚动条, 解决方案:隐藏模态框的同时设置body的overflow为scroll,同时取消右内边距. 将所有页面强制添加或者隐藏浏览器的滚动条 相关css 代码如下: //强制显示滚动条: html { overflow: scroll; } //强制隐藏滚动条: html { overf

Listview GridView 滚动条 其他属性

listview的其他设置 若对item_layout设置了高度却不起作用,那就让高度wrap_content,添加minHeight="*dp"试试(同样适合其他控件). stackFromBottom="true"  //设置为true时,你做好的列表就会显示你列表的最下面 transcriptMode="alwaysScroll"   //当你动态添加数据时,列表将自动往下滚动最新的条目可以自动滚动到可视范围内. drawSelectorO

让div产生滚动条

1 .demo{ 2 padding-right:10px; 3 overflow-y:auto; 4 padding-left:10px; 5 scrollbar-face-color:#ffffff; 6 font-size:11pt; 7 padding-bottom:0px; 8 scrollbar-highlight-color:#ffffff; 9 overflow:auto; 10 width:510px; 11 scrollbar-shadow-color:#919192; 12

使用 Vue 开发 scrollbar 滚动条组件

Vue 应该说是很火的一款前端库了,和 React 一样的高热度,今天就来用它写一个轻量的滚动条组件: 知识储备:要开发滚动条组件,需要知道知识点是如何计算滚动条的大小和位置,还有一个问题是如何监听容器大小的改变,然后更新滚动条的位置: 先把样式贴出来: /*禁用选择文本*/ .disable-selection { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-use

DOM核心API及其相关重要概念的理解

是什么? 是各大浏览器提供的针对HTML和XML文档的一个API(Application Programming Interface应用程序编程接口).DOM描述了一个层次化的节点树,容许开发人员对DOM中的节点进行增删改查,操作节点的属性和样式. 节点 HTML中的每个成分都是一个节点(元素,属性,文本,注释,文档).下图是犀牛书中对DOM结构的解析,迷茫了回头看图. 节点类型 通过节点的nodeType属性访问该节点的类型,五种不同的返回值分别代表5中类型的节点. 元素(element):

支持多种浏览器的纯css下拉菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312