How to use viewport - 10 common examples
To help you get started, we’ve selected a few viewport examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
mipengine / mip-extensions-platform / mip-trilobite-log-new / mip-trilobite-log-new.js View on Github 
if (isFirstReadDone) {
var overPageDistance = (articleContent.offsetTop + articleContent.offsetHeight)
- viewport.getHeight();
if (overPageDistance < 0) {
// 正文内容不超过一屏
log.trace(['appArticleDetail', '{' + tpId + '}', '{' + contentId + '}', 'done']);
isFirstReadDone = false;
}
else if (scrollDistance >= overPageDistance) {
log.trace(['appArticleDetail', '{' + tpId + '}', '{' + contentId + '}', 'done']);
isFirstReadDone = false;
}
}
}
scrollHandle();
viewport.on('scroll', scrollHandle);
}
// $('.listArticle').on('click', function () {
// log.trace(['cambrian', 'listArticle']);
// });
// $('video').on('play', function () {
// log.trace(['cambrian', 'detailVideo']);
// });
// $('[data-role="j-recommend-download"]').on('click', function () {
// log.trace(['cambrian', 'recommendDownload']);
// });
})();
};windowScroll: function (data, ele) {
storage.rm('usFlag');
// 滚动事件
viewport.on('scroll', function () {
if (storage.get('usFlag') === 'true') {
return false;
}
zxbjPage.method.scrollFun(data, ele);
});
},
changeHtml: function (obj, ele) {windowScroll: function (data, ele) {
storage.rm('usFlag');
// 滚动事件
viewport.on('scroll', function () {
if (storage.get('usFlag') === 'true') {
return false;
}
zxbjPage.method.scrollFun(data, ele);
});
},
changeHtml: function (obj, ele) {viewport.on('scroll', function scrollHandler() {
// 若为暂停状态,什么也不做
if (me.state === 'pause' || !me.isElementInViewport()) {
return;
}
// 获取当前滚动条位置
me.currentScrollTop = viewport.getScrollTop();
// 某些浏览器(安卓QQ)滚动时会隐藏头部但不触发resize,需要反复获取 wtf...
me.wrapperHeight = viewport.getHeight();
// 获取容器高度
me.scrollerHeight = viewport.getScrollHeight();
// 到顶了
if (me.currentScrollTop <= 0) {
// 执行回调
me.options.onScrollTop && me.options.onScrollTop.call(me);
}
// 到底了
if (me.currentScrollTop >= me.scrollerHeight - me.wrapperHeight - me.options.bufferHeightPx) {
me.scrollBottomFn();
// 执行回调
me.options.onScrollBottom && me.options.onScrollBottom.call(me);
}viewport.on('scroll', function scrollHandler() {
// 若为暂停状态,什么也不做
if (me.state === 'pause') {
return;
}
// 获取当前滚动条位置
me.currentScrollTop = viewport.getScrollTop();
// 某些浏览器(安卓QQ)滚动时会隐藏头部但不触发resize,需要反复获取 wtf...
me.wrapperHeight = viewport.getHeight();
// 到顶了
if (me.currentScrollTop <= 0) {
// 执行回调
me.options.onScrollTop && me.options.onScrollTop.call(me);
}
// 到底了
if (me.currentScrollTop >= me.scrollerHeight - me.wrapperHeight - me.options.bufferHeightPx) {
me._scrollBottomFn();
// 执行回调
me.options.onScrollBottom && me.options.onScrollBottom.call(me);
}
// 获取当前可视区页码
var currentShowPage = me.getShowPage();viewport.on('scroll', function scrollHandler () {
// 若为暂停状态,什么也不做
if (me.state === 'pause') {
return;
}
// 获取当前滚动条位置
me.currentScrollTop = viewport.getScrollTop();
// 某些浏览器(安卓QQ)滚动时会隐藏头部但不触发resize,需要反复获取 wtf...
me.wrapperHeight = viewport.getHeight();
// 到顶了
if (me.currentScrollTop <= 0) {
// 执行回调
me.options.onScrollTop && me.options.onScrollTop.call(me);
}
// 到底了
if (me.currentScrollTop >= me.scrollerHeight - me.wrapperHeight - me.options.bufferHeightPx) {
me._scrollBottomFn();
// 执行回调
me.options.onScrollBottom && me.options.onScrollBottom.call(me);
}
// 获取当前可视区页码
var currentShowPage = me.getShowPage();function initScrollLoad(isRefresh) {
var self = this;
self.scrollerHeight = viewport.getScrollHeight(); // 滚动容器高度
self.wrapperHeight = viewport.getHeight(); // 可视区高度
self.currentScrollTop = viewport.getScrollTop(); // 当前滚动条位置
viewport.on('scroll', function () {
if (self.scrollLock) {
return;
}
// 获取当前滚动条位置
self.currentScrollTop = viewport.getScrollTop();
// 某些浏览器(安卓QQ)滚动时会隐藏头部但不触发resize,需要反复获取 wtf...
self.wrapperHeight = viewport.getHeight();
// 到底了
if (self.currentScrollTop >= self.scrollerHeight - self.wrapperHeight) {
loadDataHandle.call(self, isRefresh, function () {
refreshViewport.call(self);
});
}
});viewport.on('scroll', function () {
var scrollTop = viewport.getScrollTop();
if (scrollTop < sHeight) {
$('.item-hd-so-box').css('margin-top', -scrollTop);
}
else if (scrollTop === 0) {
$('.item-hd-so-box').css('margin-top', 0);
}
else {
$('.item-hd-so-box').css('margin-top', -sHeight);
}
});
// 展开全文viewport.on('scroll', function () {
// 滚动条滚动的距离
var scrollTop = viewport.getScrollTop();
// 内容高度
var domHeight = viewport.getScrollHeight();
// 视口高度
var viewHei = viewport.getHeight();
if ($(ele.scrollClass).length > 0) {
var eleTop = $(ele.scrollClass).offset().top;
if (location.host === 'm.jia.com' || util.platform.isAndroid()) {
if (scrollTop > 10 && eleTop > scrollTop + viewHei / 2) {
$(ele.class).parent().addClass('hide');
}
else {
$(ele.class).parent().removeClass('hide');
}
if (eleTop <= scrollTop + viewHei / 2) {
$(ele.class).parent().addClass('shake');scrollFun: function (data, ele) {
var $this = $(ele);
// 滚动条滚动的距离
var scrollTop = viewport.getScrollTop();
// 内容高度
var domHeight = viewport.getScrollHeight();
// 视口高度
var viewHei = viewport.getHeight();
// 如果用户自行做了操作 则此处不影响用户操作
if (zxbjPage.usFlag || storage.get('usFlag') === 'true') {
return false;
}
// 滚动超过一屏
if ($(data.scrollClass).length > 0) {
var eleTop = $(data.scrollClass).offset().top;
if (location.host === 'm.jia.com' || util.platform.isAndroid()) {
if (eleTop <= scrollTop + viewHei / 2) {
storage.set('usFlag', 'true', 21600000);
zxbjPage.usFlag = true;
$this.find('.footer_xrhb').trigger('click');
}
}
else {
if (eleTop <= viewHei / 2) {viewport
represents the browsers viewport as a signal changing over time
