scrolltop | 易学教程

js上下滚动监控

阅读更多关于 js上下滚动监控

<body> <div class="wrap"> <div class="scroll"></div> </div> </body> <script type="text/javascript"> var scrollTop = 0; var t = 0; var wrapdom=document.querySelector('.wrap'); wrapdom.onscroll=function () { scrollTop =wrapdom.scrollTop; //滚动高度 if (t <= scrollTop) { console.log("往下滚动"); } else { console.log("往上滚动"); } t = scrollTop; }; </script> 来源： CSDN 作者： one minute fly 链接： https://blog.csdn.net/formylovetm/article/details/104074280

js-scroll判断页面是向上滚动还是向下滚动

阅读更多关于 js-scroll判断页面是向上滚动还是向下滚动

原理：那当前的scrollTop和之前的scrollTop对比如果变大了，表示向下滚动（scrollTop值变大）；如果变小了，表示向上滚动（scrollTop值变小）。方法一：js代码： $(document).ready(function(){ var p=0, t=0; $(window).scroll(function(){ p=$(this).scrollTop(); if(t<p){ //下滚 }else{ //上滚 } setTimeout(function(){ t = p ; },0) }) }) 方法二： 1.单纯判断滚动条方向： function scroll(fn){ var beforeScrollTop = document.body.scrollTop, fn = fn || function(){}; window.addEventListener("scroll",function(){ var afterScrollTop = document.body.scrollTop; delta = afterScrollTop - beterScrollTop; if(delta===0){ return false; } fn(delte>0?"dowm":"up"); beforeScrollTop = afterScrollTop; }

移动端页面滚动结束判断

阅读更多关于移动端页面滚动结束判断

在做移动端的需求有时候需要用到对滚动结束进行事件绑定以完成一定的功能，先来了解一下现状。在移动端，正常的一次swipe动作会依照以下顺序触发事件： touchstart -> touchmove -> touchend ->scroll 一、IPAD 通过以下代码进行测试：　　　　 var timestart =0; var timer = null; function log(){ console.log("---------settimeout" + (new Date()-timestart) ); } $(window).on('scroll',function(){ console.log('-----scrollend:' + (new Date() - timestart) +'ms'); timestart = new Date(); }); $(window).on('touchstart',function(){ console.log('touchstart'); }); $(window).on('touchmove',function(){ console.log('touchmove'); }); $(window).on('touchend',function(){ timestart = new Date(); console.log(

小程序左右联动实现记录

阅读更多关于小程序左右联动实现记录

最近在学习小程序，实现了左右联动的功能，记录一下思绪，方便以后参考。最终的界面如下, 点击左边任意一个项目，右边会跳到相应项目的起始位置，右边滑动，左则会跳到相应的位置。　在这里，右则每一项的高度都是固定的，方便定位当前滑动距离在哪一个大项（左则）里。右则的 scroll-view 使用了一项关键的属性：scroll-into-view，这个属性用来确定 scrollTop 的值的，当 scroll-into-view 的值和 scroll-view 里面的元素的id的值相等时，scroll-view 会定位到该元素，scrollTop 的值就是滑动到该元素的值。做这个功能的时候，遇到一个问题，就是右则的小项种类不多的时候，例如某个类目只有1~2个，那么点击左则的大项的时候，会出现点击不到的现象。这里可以用点小技巧来解决：点击左则大项的时候，设置当前点击标记为true，设置 classifySeleted 为当前点击的项目。然后在滑动触发函数（onGoodsScroll）里面，判断当前触发滑动是否点击产生的，如果是，则不设置 classifySeleted 的值，否则就计算 classifySeleted 的值并设置。 wxml代码如下： 1 <view class="content-container"> 2 <scroll-view class="classify

高度自适应输入框的清晰解题思路

阅读更多关于高度自适应输入框的清晰解题思路

前言业务开发中，经常会遇到文本输入框高度随着输入内容高度变化的情况，下面我们来详细说明一下实现这种输入框的方案和解题思路方案一为一种扩展思路,仅供参考方案二为常规思路，急着用的小伙伴建议直接看二第三个板块附上了react native和react native to web的代码实现方案 ※方案一：contenteditable属性法 contenteditable属性表示元素是否可编辑，变为可编辑状态的元素还保留其原有的特性，属性值为如下两者之一 -true或空字符串，表示元素是可编辑的； -false表示元素不是可编辑的；该属性是一个枚举属性，而非布尔属性。这意味着必须显式设置其值为 true 、 false 或空字符串中的一个，最好不要简写为 <label contenteditable>Example Label</label> 正确的用法是 : <element contenteditable="value"> --value=true/false 🌰分析 <style type="text/css"> .container { padding: 20px; } .auto-input { min-height: 100px; font-size: 30px; border: 1px solid red; } </style> <body> <h1

5行js代码搞定导航吸顶效果

阅读更多关于 5行js代码搞定导航吸顶效果

一、HTML布局首先写HTML布局 <body> <div id="wrap"></div> </body> 二、CSS样式给点简单的样式 <style> *{ margin: 0; padding: 0; } body{ height: 2000px; background-image: linear-gradient(-180deg, #15f09d 0%, #25A0FF 50%, #fca72b 100%); } #wrap{ background-color: rgba(0,0,0,0.2); width: 100%; height: 100px; margin-top: 100px; } #wrap[data-fixed="fixed"]{ position: fixed; top:0; left: 0; margin: 0; } </style> 三、JS代码 1、面向过程直接编写5行代码搞定 <script> var obj = document.getElementById("wrap"); var ot = obj.offsetTop; document.onscroll = function () { var st = document.body.scrollTop || document.documentElement.scrollTop; obj

jquery-触底加载无限滚动

阅读更多关于 jquery-触底加载无限滚动

在我们将较长的执行结果展示到前端页面时可能会较占篇幅，可以设置一个无限滚动效果将其固定显示在一个固定大小的框框，并且执行结果实现实时更新 HTML代码： <div id="post_deploy_result" name="deploy_result" style="height: 150px;overflow-y: auto;" class="zntest"></div> js代码： $("#"+result['progress']+"_result").append("<p>"+result["msg"]+"</p>"); # 将实时更新的内容渲染到页面 // $(".zntest").animate({ scrollTop: $('.zntest').prop("scrollHeight")}, 1000); # 页面自动滚动方法1 // var d = $('.zntest');d.scrollTop(d.prop("scrollHeight")); # 页面自动滚动方法2 $('.zntest').scrollTop($('.zntest')[0].scrollHeight); # 页面自动滚动方法3 最终效果就像cmd黑框口执行命令，实时更新状态并触底自动弹起来源： https://www.cnblogs.com/lutt/p/12207740.html

body,clientHiehgt,scrollTop

阅读更多关于 body,clientHiehgt,scrollTop

只有在有滚动的时候scrollTop才有值，给scrollTop赋值会滚动到对应的位置。 clientHeight就是元素 height的值 body 很奇怪，当html,body高度为100%， body内容超过一屏幕时，body.scrollTop始终为0，反而html的scrollTop有值，不知道这是为什么。而且，给body设置一个高度为200，overflow:hidden, body的实际内容还是会显示一屏幕。如果一个元素body内容超过一屏值如下 document.body.clientHeight 1708 document.body.offsetHeight 1708 document.documentElement.offsetHeight 1708 document.documentElement.clientHeight 920 来源： https://www.cnblogs.com/chillaxyw/p/12203860.html

Sticky navbar makes content jump on way back up

阅读更多关于 Sticky navbar makes content jump on way back up

问题 I Have a simple site set up with a header, navbar and content. When the page reaches the navbar, the position becomes fixed so the navbar sits at the top of the page - at this point, the navbar height also gets a bit smaller (as I like this effect) - I have done this by adding separate classes, fixed and thinner to the navbar. Most people are aware of the issue that occurs when you add "position:fixed" to an inline element in that it makes the content suddenly "jump" upwards. To counteract

vue 滚动加载

阅读更多关于 vue 滚动加载

<template> <div class="wraper" @scroll="onScroll($event)"> <div class="item" v-for="item in items"> {{item}} </div> </div> </template> <script> export default { data () { return { items:[], pgSize:36, rawItems:[], pgNo:1 } }, ready () { for(var i=0;i<=1000;i++){ this.rawItems.push(i) } this.changePgItems() }, methods:{ onScroll(event){ var offsetHeight = event.currentTarget.offsetHeight, scrollHeight = event.target.scrollHeight, scrollTop = event.target.scrollTop, scrollBottom = offsetHeight + scrollTop if(scrollTop===0) { if(this.pgNo===1) { return } this.pgNo-- this.changePgItems() event

订阅 scrolltop