精华内容
下载资源
问答
  • 监听滚动条事件

    千次阅读 2017-08-02 11:41:09
    以前博主并不知道滚动条是怎样的原理,看了一篇博客,明白了滚动条滚动的原理,下面我来说一说滚动条的原理:首先理解三个dom元素,分别是:clientHeight、offsetHeight、scrollTop。clientHeight:这个元素的高度,...

    以前博主并不知道滚动条是怎样的原理,看了一篇博客,明白了滚动条滚动的原理,下面我来说一说滚动条的原理:

    首先理解三个dom元素,分别是:clientHeight、offsetHeight、scrollTop。

    clientHeight:这个元素的高度,占用整个空间的高度,所以,如果一个div有滚动条,那个这个高度则是不包括滚动条没显示出来的下面部分的内容。而只是单纯的DIV的高度。

    offsetHeight:是指元素内容的高度。依照上面的,那这个高度呢就是DIV内部的高度,包括可见部分及以滚动条下面的不可见部分。

    scrollTop:这个是什么呢?他可以理解为滚动条可以滚动的长度。

    举例,如果一个DIV高度是400px(即clientHeight为400),而里面的内容是一个很长的列表,内容的高度是1000px(即offsetHeight为1000)。那么,可见部分我们看到400px,1000px的内容中还有600px不可见。而这不可见的部分呢,正是我们通过拉动滚动条才能把这一部分显示出来。你如果滚动条不拉动,此时scrollTop为0,如果你把滚动条拉到底,显示出列表最下面的部分,此时,scrollTop为600。 所以scrollTop的取值区间为[0, 600]。 所以这个600可以理解为滚动条可以滚动的长度。

    理解完上面的这个概念之后。要判断是否滚动到底部就很好做了。

    看完滚动条的原理之后,我就用了上次那个niceScroll的插件,其实那个插件就是把原生的滚动条改了样式,其实实质还是原生滚

    动条,不过它用jQuery把它的兼容性做的很好了,现在演示代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style type="text/css">
    		#d1{
    			width: 200px;
    			height:300px;
    			overflow: auto;
    			border:1px solid #ddd;
    			margin: auto;
    			padding:10px;
    		}
    		#d2,#d3{
    			height:1000px;
    		}
    	</style>
    </head>
    <body>
    	<div id = "d2">
    		
    	</div>
    	<div id = "d1">
    		<div id = "d4">
    			Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    		</div>
    	</div>
    	<div id = "d3">
    		
    	</div>
    	<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    	<script src="https://cdn.bootcss.com/jquery.nicescroll/3.7.6/jquery.nicescroll.min.js"></script>
    	<script type="text/javascript">
    		$("#d1").niceScroll({
    			cursorcolor: "#75BCE1",
    		});
    		
    		console.log($("#d4").scrollHeight);
    		$("#d1").scroll(function(){
    			console.log($("#d1").scrollTop());
    			console.log('可见高度',$("#d1").height());//容器高度
    			console.log('内容高度',$("#d4").height());//内容高度
    			if($("#d1").scrollTop() >= ($("#d4").height() - $("#d1").height())){
    				console.log('到底部啦'); //如果滚动条滚动高度 >= 内容高度 - 容器高度,就说明到底部了
    			}
    		})
    	</script>
    </body>
    </html>
    

    但是火狐好像没有把padding算在里面,需要把padding算在里面,ok监控滚动条监听事件也搞定了!

    展开全文
  • 今天小编就为大家分享一篇vue 监听某个div垂直滚动条下拉到底部的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue 监听div滚动条滚动事件

    千次阅读 2019-10-09 16:31:35
    监听div , 定义ref <div class="productSec" ref="rightContent" @mousewheel="scrool">... //在mounted钩子函数绑定滚动条事件 this.$refs.rightContent.addEventListener('scroll', this.scroo...
    监听此div , 定义ref  
    <div class="productSec" ref="rightContent" @mousewheel="scrool">
    mounted: function(){
      //在mounted钩子函数绑定滚动条事件
      this.$refs.rightContent.addEventListener('scroll', this.scrool);
      
    },
    
    methods: {
      scrool(){
        console.log('===scrool===') 
        let scrolled = this.$refs.rightContent.scrollTop;
        console.log(scrolled ) 
      } 
    },

     

    注:只写@mousewheel="scrool"  鼠标滚动事件,不能监听到:用鼠标拖动滚动条

    展开全文
  • $(document).scroll(function() { var scroH = $(document).scrollTop(); //滚动高度 var viewH = $(window).height(); //可见高度 var contentH = $(document).height(); //内容高度 if(scroH >1080)...
    $(document).scroll(function() {
        var scroH = $(document).scrollTop();  //滚动高度
        var viewH = $(window).height();  //可见高度 
        var contentH = $(document).height();  //内容高度
     
        if(scroH >1080){  // 距离顶部大于1080px时
            
        }
        if (contentH - (scroH + viewH) <= 1080){  // 距离底部高度小于1080px
             
        }  
        if (contentH = (scroH + viewH)){  //滚动条滑到底部啦
             
        }  
    });
    

     

    展开全文
  • vue 监听div滚动事件

    2021-04-26 11:42:00
    使用场景,列表下拉刷新数据: <div class="table-box" @scroll="divscrollFn($event)"> </div> css 设置overflow-y: auto;...js监听方法: ...divscrollFn(event){ //监听滚动事件 let el .

    使用场景,列表下拉刷新数据:

    <div class="table-box" @scroll="divscrollFn($event)">
    </div>

    css 设置 overflow-y: auto;

    .table-box{
    		width: 90%;
    		margin: 1rem auto;
    		height: 20rem;
    		overflow-y: auto;
    }

    js监听方法:

    divscrollFn(event){ //监听滚动事件
    			  let el = event.target
    			   if(el.scrollTop+el.clientHeight>=el.scrollHeight){
    			      console.log('到底啦');
    				  this.getList() //加载列表
    			   };
    			}

     

    展开全文
  • vue项目中实现监听滚动条滚动事件并滚动到固定位置需求场景直接上代码THE LAST 需求场景 项目结构:vue node.js webpack 滚动条滚动到某处的时候 tab就切换成当前位置的值并且点击tab还能滚动到想要的位置,大概就是...
  • //JS实现懒加载原理,监听滚动时间,当滚动条位置减去屏幕高度大于div所在的offsetTop的时候 这个div样式改变; //换成img元素,将真实的src写到自定义data-src属性中,滚动到位置的时候用data-src代替现在的src即可 ...
  • 方法一、监听滚动条事件滚动加载 1、dom结构:最外层dom <div class="scrollWrap"> </div> 2、mounted:初始化监听 //mounted监听处理 this.$nextTick (() => { if (document.qu...
  • 滚动条滚动时,会触发onscroll事件。 如果用jQuery设置监听,可以写成 $(selector).scroll(function(event){  ...... })   给显示滚动条的元素的scrollTop属性赋值,则指定滚动条滚动到哪里。单位是px。 ...
  • 在vb中,滚动条的scroll 事件和change 事件的区别scroll和change的区别为:指代不同、用法不同、侧重点不同 一、指代不同scroll:滚屏,滚动。...如何获取网页滚动条滚动事件首先新建一个html文件,在文件内引入...
  • jquery监听页面滚动条滚动事件

    万次阅读 2018-08-10 16:08:02
    $(document).scroll(function() { var scroH = $(document).scrollTop(); //滚动高度 var viewH = $(window).height(); //可见高度 var contentH = $(document).height(); //内容高度 ...
  • js监听滚动条滚动 改变元素

    千次阅读 2016-11-21 17:22:35
    js监听滚动条滚动改变元素
  • 监听滚动条

    千次阅读 2018-05-26 14:37:06
    今天分享一下简单的用jquery实现监听滚动条;首先:我们有时候会遇到这样一种问题,一个div元素它的宽度超过了浏览器的宽度时,它会默认出来横向滚动条。但是我们又想让这个div固定在头部,上下不能滑动,左右可以...
  • 今天小编就为大家分享一篇vue移动端监听滚动条高度的实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 在window.onscroll上即可添加滚动条滚动事件,在监听函数中的top=document.documentElement.scrollTop||document.body.scrollTop;之所以这么写,就是避免不同浏览器的兼容性,这里我测试了chrom和ff浏览器,前者支持...
  • 使用原生js获取浏览器可是高度,滚动条高度,监听滚动条,滑动时 触发 改变导航元素位置,和子元素样式,适合新手参考借鉴!
  • 页面描述:页面分为左右两个部分,左边是目录树,右边是id=main_box的div,在main_box中含有多个div并列,...让main_box可以滚动,但是我希望知道滚动到哪个子div了,好让左边的目录树对应的节点高亮显示 mounted(...
  • 记录当前滚动条与文档顶部间的距离,将滚动后滚动条与文档顶部间的距离与滚动前滚动条与文档顶部间的距离做比较,若距离变大,则是向下滚,若距离变小,则是向上滚 完整范例代码 <template> <div>...
  • jquery监听页面滚动条滚动事件上拉触底事件 $(document).scroll(function() { var scroH = $(document).scrollTop(); //滚动高度 var viewH = $(window).height(); //可见高度 var contentH = $(document)....
  • div className={'main-content'} key={'main-content'} style={{height: scrollerHeight, overflowY: 'scroll'}} ref={c => { this.scrollRef = c; }} onScrollCapture={() => this.onScrollHandle()} &...
  • 举个例子,当滚动条滚动的时候,我将会改变这个id为search-scroll的背景颜色,那么我将要监听产生滚动条的元素。 产生滚动条的元素的如下: 可以看到它的id为wrapper-scroll,那么方法如下: mounted(){ var ...
  • vue 2.x 监听div垂直滚动条到最底部

    千次阅读 2019-02-12 22:44:24
    mounted(){ window.addEventListener('scroll',this.handleScroll,true); }, methods: { handleScroll(e){ //变量scrollTop是滚动条滚动时,距离顶部的距离 var scrollTop = e.target.scrollTop; ...
  • 1.滚动条监听: 1.window.scrolltop。对网页滚动条 var divh = document.getElementById("da").scrollTop; 获取div滚动条高度 ;配合定时器每多少秒获取一次; 2.opacity 设置div的透明度 transparent 是设置...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 10,837
精华内容 4,334
关键字:

div监听滚动条滚动事件