scrolltop

效果图: ==> 代码: //test1.wxml <view class='header' style="opacity:{{opacityStyle}}" hidden='{{hiddenModel}}'> 头部 </view> <view class='demo1'>滑动1</view> <view class='demo2'>滑动2</view> //test1.wxss .demo1,.demo2{ height: 500px; background: #ccc } .demo2{ background: #f2f2f2 } .header{ position: fixed; width: 100%; top: 0; left: 0; background: red; height: 100rpx } //test1.js // pages/test1/test1.js Page({ /** * 页面的初始数据 */ data: { scrollTop: 0, hiddenModel:true, opacityStyle: 0 }, //监听屏幕滚动 判断上下滚动 onPageScroll: function (ev) { var _this = this; if (ev.scrollTop > 10) { let opacity = ev.scrollTop / 140

对于一个有多个图片的网站来说，访问的时候不应该直接加载所有图片，而是应该只将浏览器窗口内的图片进行加载。当滚动的时候，在加载更多的图片，叫做 图片的懒加载 。 我们可以通过给img自定义一个新属性，来存储图片真实的src地址，当需要加载的时候，再将这个真实的地址赋给src，进行图片加载。 整体思路： 1、设置个data-src(自定义一个属性)来存放真实地址 2、当滚动页面时，检查所有的img标签，看是否出现在视野中，如果已经出现在了视野中，那继续再进行判断，看其是否已经被加载过了，如果还没有被加载过，那就进行加载 　　 $(window).on('scroll',function () {//当页面滚动的时候绑定事件 $('.container img').each(function () {//遍历所有的img标签 if (checkShow($(this)) && !isLoaded($(this)) ){ // 需要写一个checkShow函数来判断当前img是否已经出现在了视野中 //还需要写一个isLoaded函数判断当前img是否已经被加载过了 loadImg($(this));//符合上述条件之后，再写一个加载函数加载当前img } }) }) function checkShow($img) { // 传入一个img的jq对象 } function

//点击导航铆钉到指定位置 goDetails(index) { this.current = index; let height = Number(this.$refs['navleft'].offsetHeight)// 导航的高度 let toTop = this.$refs.single[index].offsetTop // index对应内容的高度 let total = index === 0 ? toTop - height - 10 : toTop - height + index - 15　　　　　　　　　　//减去导航的高度和margin-tbottom的高度为滚动高度 let distance = document.documentElement.scrollTop || document.body.scrollTop let step = total / 20 if (total > distance) { let newTotal = total - distance step = newTotal / 20 smoothDown() } else { let newTotal = distance - total step = newTotal / 20 smoothUp() } function smoothDown() { if (distance

分类 滚动分 全局滚动(浏览器窗口) 跟 局部滚动(自定义的盒子) ，以下内容绝大部分都是指 全局滚动 ， 局部滚动 的话获取 指定的DOM 再调用 相应的API 即可 如何设置全局滚动条高度 1. 最常用的方法： window.scrollTo(0, 0)// orwindow.scrollTo({ left: 0, top: 100}) 2. 也可以利用 相对滚动 设置： window.scrollBy(0, 0);// orwindow.scrollBy({ left: 0, top: 100}); 3. 或者利用 scrollTop 设置： document.scrollingElement.scrollTop = 100;注意：scrollTo跟scrollBy的参数是一样的，区别就是scrollBy滚动距离是相对与当前滚动条位置进行滚动 如何指定一个元素显示在视窗 1. 最常用的方法： // 获取元素的offsetTop(元素距离文档顶部的距离)let offsetTop = document.querySelector(".box").offsetTop;// 设置滚动条的高度window.scrollTo(0, offsetTop); 2. 或者用锚点： <a href="#box">盒子出现在顶部</a><div id="box"></div> 3. 或者利用

How can I use the scrolltop without an animation This code works: var offTop = $('#box').offset().top; offTop = offTop-43; $('#mainCt').animate({scrollTop: '+=' + offTop + 'px'}, 400); And here are my (not working solutions): $("#mainCt").scrollTop('+=' + offTop + 'px'); // doesn't work $("#mainCt").scrollTop('+='+offTop); // doesn't work hhh = setTimeout(' $("#mainCt").scrollTop('+offTop+');',800); // doesn't work DEMO http://jsfiddle.net/DNNFF/9/ maybe if you don't want an animation or anything fancy just use an anchor <a name="top"></a> Place it where you need to scroll and in your function

For example I have I a div tag with the scroll bar on the right of the div tag. I want to show the div with the last line, so I have this: document.getElementById("divscroll").scrollTop = 250000; I can make it scroll to the end in Firefox but never succcess with IE event with the bigger number! Is there any simple Cross-borwser script (not JQuery or any big framework!) scrollTop works in all major browsers. To scroll to the bottom of the element: var div = document.getElementById('divscroll'); div.scrollTop = div.scrollHeight - div.clientHeight; clientHeight also works across browsers , and

Got a little bit of a problem with getting my jquery accordion to do what I want. I always want the tab that is being clicked to be scrolled to a fixed amount of pixels from the top of the page, and I kinda got it working. But whenever the active tab is above the tab being clicked and if the page already is scrolled down a bit, the top and parts of the content of the clicked tab is scrolled up past the top of the page. This is what i got: $(function() { $("#accordion").accordion({ autoHeight: false, collapsible: true, heightStyle: "content", active: 0, animate: 300 }); $('#accordion h3').bind(

网页可见区域高：document.body.clientHeight 网页正文全文高：document.body.scrollHeight 网页可见区域高（包括边线的高）：document.body.offsetHeight 网页被卷去的高：document.body.scrollTop 屏幕分辨率高：window.screen.height clientHeight： 包括padding但不包括border、水平滚动条、margin的元素的高度。对于inline的元素这个属性一直是0，单位px，只读元素。 offsetHeight： 包括padding、border、水平滚动条，但不包括margin的元素的高度。对于inline的元素这个属性一直是0，单位px，只读元素。 接下来讨论出现有滚动条时的情况： 当本元素的子元素比本元素高且overflow=scroll时，本元素会scroll，这时： scrollHeight: 因为子元素比父元素高，父元素不想被子元素撑的一样高就显示出了滚动条，在滚动的过程中本元素有部分被隐藏了，scrollHeight代表包括当前不可见部分的元素的高度。而可见部分的高度其实就是clientHeight，也就是scrollHeight>=clientHeight恒成立。在有滚动条时讨论scrollHeight才有意义

文章中提到，在标准模式（standards mode）下，clientX 是从 0 开始计算的，而在怪异模式下（quirks mode，有没有更好的翻译？），是从 2 开始的，但是奇怪的很，我的测试两种模式都是从 2,2 开始的。 实 际上，这个值是分别存在于 document.documentElement.clientLeft 和 document.body.clientLeft 。 在 standards mode 下面， document.documentElement.clientLeft 值为 2，document.body.clientLeft 为 0 。在 quirks mode 下面正好相反 document.documentElement.clientLeft 为 0 ，document.body.clientLeft 值为 2 。 所以，想要得到准确的鼠标位置，必须： x=event.clientX-document.documentElement.clientLeft - document.body.clientLeft ; y=event.clientY-document.documentElement.clientTop - document.body.clientTop ; 注意，以上代码仅适用于 IE，firefox 两个值都是 undefined。

文章中提到，在标准模式（standards mode）下，clientX 是从 0 开始计算的，而在怪异模式下（quirks mode，有没有更好的翻译？），是从 2 开始的，但是奇怪的很，我的测试两种模式都是从 2,2 开始的。 实 际上，这个值是分别存在于 document.documentElement.clientLeft 和 document.body.clientLeft 。 在 standards mode 下面， document.documentElement.clientLeft 值为 2，document.body.clientLeft 为 0 。在 quirks mode 下面正好相反 document.documentElement.clientLeft 为 0 ，document.body.clientLeft 值为 2 。 所以，想要得到准确的鼠标位置，必须： x=event.clientX-document.documentElement.clientLeft - document.body.clientLeft ; y=event.clientY-document.documentElement.clientTop - document.body.clientTop ; 注意，以上代码仅适用于 IE，firefox 两个值都是 undefined。