scrolltop

一,使用view形式的回到顶部 HTML： <image src='../../img/button-top.png' class='goTop' hidden='{{!floorstatus}}' bindtap="goTop"></image> CSS： /* 返回顶部 */ .goTop{ height: 80rpx; width: 80rpx; position: fixed; bottom: 50rpx; background: rgba(0,0,0,.3); right: 30rpx; border-radius: 50%; } JS： // 获取滚动条当前位置 onPageScroll: function (e) { console.log(e) if (e.scrollTop > 100) { this.setData({ floorstatus: true }); } else { this.setData({ floorstatus: false }); } }, //回到顶部 goTop: function (e) { // 一键回到顶部 if (wx.pageScrollTo) { wx.pageScrollTo({ scrollTop: 0 }) } else { wx.showModal({ title: '提示', content: '当前微信版本过低

前言：微信小程序的代码实现，uniapp与原生代码差异不大，语法格式可对比swiper实现的原生代码和scrollview实现的uniapp代码。 参考资料： 微信小程序api>> https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html 获取元素/组件与顶部的距离>> https://www.jianshu.com/p/fe72cff2b808 swiper实现的简易demo>> https://blog.csdn.net/weixin_41599291/article/details/93650074 功能实现： 右侧滚动，左侧会对应高亮显示； 左侧是否重复点击，右侧显示相应数据，置顶； 效果图： 代码： <template> <view> <view style="text-align: center;">搜索栏</view> <view class='productNav'> <view class='left'> <view :class="posi == 'id'+index ?'selected':'normal'" @tap='switchNav("id"+index, index)' v-for="(item, index) in dataList" :key=

Im using the following code to detect when an object should become 'sticky' and stay fixed in its content. var $window = $(window), $stickyEl = $('#single-post-details'), elTop = $stickyEl.offset().top; $window.scroll(function() { $stickyEl.toggleClass('sticky', $window.scrollTop() + 52 > elTop); }); However I would like to make this responsive. This means that somehow it needs to detect the height of the banner above it first so that it doesn't trigger at the wrong point.. Here is a fiddle with as an example. The problem is that on the resize, the top position of you sticky element change. To

var gao = document.documentElement.clientHeight; var headHeight = parseInt($('.yhead').css('height')) $('.ybody').css('height', gao - headHeight + 'px') //前端分页 $(".yright").scroll(function(){ var scrollHeight = document.querySelector(".yright").scrollHeight; // 没用滚动条的情况下，元素内容的总高度 var scrollTop = document.querySelector(".yright").scrollTop; console.log(gao,scrollHeight,scrollTop) if((scrollTop + gao - scrollHeight) == headHeight){ $('.fenye').click() } console.log("没到底： ", ); }) 　　　　div布局就不用讲了，主要是滚动条事件这一块是真晕，上网查资料查到的情况，用了一下真的可以，真是太高兴了 以后有时间了在好好研究研究，暂时就先这样，另附几个查阅的资料： javascript、jquery获取网页的高度和宽度

e.clientX/e.clientY 鼠标在可视区域中的位置 e.pageX/e.pageY 鼠标在页面中的位置 有兼容性问题 从IE9以后才支持 pageY = clientY + 页面滚动出去的距离 // 获取页面滚动出去的距离 function getScroll() { var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft; var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; return { scrollLeft: scrollLeft, scrollTop: scrollTop } } // 获取鼠标在页面的位置，处理浏览器兼容性 function getPage(e) { var pageX = e.pageX || e.clientX + getScroll().scrollLeft; var pageY = e.pageY || e.clientY + getScroll().scrollTop; return { pageX: pageX, pageY: pageY } } 转载来源： https://blog.csdn.net/weixin

一直对ScrollTop、ScrollHeight、ClientHeight、OffsetHeight这些内容傻傻分不清楚，今天整体下。 scrollHeight scrollHeight含有 scroll 当然这个高度与滚动相关。 读写：只读 描述：包括overflow样式属性导致的视图中不可见内容，没有垂直滚动条的情况下，scrollHeight值与元素视图填充所有内容所需要的最小值clientHeight相同。包括元素的padding，但不包括元素的margin. 拓展：判定元素是否滚动到底 如果元素滚动到底，下面等式返回true，没有则返回false. element.scrollHeight - element.scrollTop === element.clientHeight scrollTop 读写：可读可写 描述：这个Element.scrollTop 属性可以设置或者获取一个元素距离他容器顶部的像素距离。一个元素的 scrollTop 是可以去计算出这个元素距离它容器顶部的可见高度。当一个元素的容器没有产生垂直方向的滚动条,那它的 scrollTop 的值默认为0. 注意事项：scrollTop可以被设置任何的整数, 但以下情况会报错: 如果一个元素不能被滚动 (e.g. 它没有益处容器或者 这个元素是不可滚动的), scrollTop被设置为0.

转载自： https://www.imooc.com/article/17571 网页可见区域高：document.body.clientHeight 网页正文全文高：document.body.scrollHeight 网页可见区域高（包括边线的高）：document.body.offsetHeight 网页被卷去的高：document.body.scrollTop 屏幕分辨率高：window.screen.height 每个HTML元素都具有clientHeight offsetHeight scrollHeight offsetTop scrollTop 这5个和元素高度、滚动、位置相关的属性，单凭单词很难搞清楚分别代表什么意思之间有什么区别。通过阅读它们的文档总结出规律如下： clientHeight和offsetHeight属性和元素的滚动、位置没有关系它代表元素的高度，其中： clientHeight：包括padding但不包括border、水平滚动条、margin的元素的高度。对于inline的元素这个属性一直是0，单位px，只读元素。 offsetHeight：包括padding、border、水平滚动条，但不包括margin的元素的高度。对于inline的元素这个属性一直是0，单位px，只读元素。 接下来讨论出现有滚动条时的情况：

I'm using linear layout manager and RecyclerView with a LinearLayout Manager to populate some list of items. When I'm displaying the recyclerview for the first time and I use: linearLayoutManager.scrollToPosition(desiredindex); it scrolls to the top exactly where I want. Now here is the tricky part - When I'm scrolling to top of recyclerview (i.e. new items indices will be lower than the desiredindex ) and I call: linearLayoutManager.scrollToPosition(desiredindex); It still works fine, but when the recyclerview has been scrolled beyond the desiredindex, the recycler view scrolls such that the