How to use the viewport.getHeight function in viewport
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-hs-scroll / infinitescroll.js View on Github 
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);
});
}
});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) {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;
// if (!zxbjPage.isBaiduApp) {
$this.find('.footer_xrhb').trigger('click');
// }
}
}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');
}
else {
$(ele.class).parent().removeClass('shake');
}define(function (require) {
'use strict';
var storyContain = [];
var emitter;
var viewport = require('viewport');
var constConfig = require('./mip-story-config');
var PAGE_ROLE = constConfig.PAGE_ROLE;
var DIRECTIONMAP = constConfig.DIRECTIONMAP;
var SWITCHPAGE_THRESHOLD = constConfig.SWITCHPAGE_THRESHOLD;
var CURRENT = constConfig.PAGE_STATE.current;
var ACTIVE = constConfig.PAGE_STATE.active;
var storyState = require('./mip-story-state');
var STYLE = 'style';
var screenWidth = viewport.getWidth();
var screenHeight = viewport.getHeight();
var SWITCHTYPES = {};
var switchPageType = '';
var initViewForSwitchCB;
var sliderStartCB;
var resetSlideEndViewCB;
var showDampingCB;
var util = require('util');
var dm = util.dom;
var SLIDEMOVING = 'slideMoving';
var storyInstance;
var storyInstanceEle;
var sliderTime = 200;
var reboundTime = 80;
var recommend;function getPopupImgPos(imgWidth, imgHeight) {
var width = viewport.getWidth();
var height = Math.round(width * imgHeight / imgWidth);
var top = (viewport.getHeight() - height) / 2;
return {
width: width,
height: height,
left: 0,
top: top
};
}function getPopupImgPos(imgWidth, imgHeight) {
var width = viewport.getWidth();
var height = Math.round(width * imgHeight / imgWidth);
var top = (viewport.getHeight() - height) / 2;
return {
width: width,
height: height,
left: 0,
top: top
};
}viewport
represents the browsers viewport as a signal changing over time
