o-视图端口

用于附加解开的听众调整大小、卷轴、方向和可见度的事件 window。 。 。 .

使用量

检查出来 如何将 Origami 组件纳入您的项目 开始 o-viewport。 。 。 .

注:在组成部分的API和以下文件中 orientation 财务报告和审定财务报表 visibility 被替换为 orientationchange 或者说 visibilitychange,但实际浏览器事件是 orientationchange 或者说 visibilitychange

方法

o-viewport#listenTo(eventType)

向窗口上的事件附上解禁/解冻(酌情)听众[resize, (中文(简体) ), scroll, (中文(简体) ), orientation, (中文(简体) ), visibility 或者说 all它反过来又在 oViewport 命名空间( 参见 活动 页:1.

注意: 全部启用所有 O- Viewport 活动 .

import oViewport from '@financial-times/o-viewport';

// Fire for orientation events.
oViewport.listenTo('orientation');

// Listener for debounced orientation events via o-viewport.
document.body.addEventListener('oViewport.orientation', function(event) {
    console.log(event.type); // oViewport.orientation
    console.log(event.viewport); // { height, width }
    console.log(event.orientation); // 'portrait' or 'landscape'
    console.log(event.originalEvent); // the original browser event
});

见 事件 需要更多的实例.

o-viewport#stopListeningTo(eventType)

从窗口中删除所附带的对已命名事件的听众[resize, (中文(简体) ), scroll, (中文(简体) ), orientation, (中文(简体) ), visibility 或者说 all[ [ ] [ ] ]. ].

注意: 所有都会禁用所有 o-viewport 事件 .

// Stop listening to the orientation event.
oViewport.stopListeningTo('orientation');

o-viewport#getOrientation()

提供了一种合理的可靠方式(比 window.orientation)获得取景点的当前取向.

oViewport.getOrientation(); // 'portrait' or 'landscape'

o-viewport#getVisibility()

提供了合理可靠的方法,以获得目前景点的能见度.

oViewport.getVisibility(); // boolean, true if visible

o-viewport#getSize(ignoreScrollbars)

提供了获取浏览器窗口当前尺寸的可靠方式. 返回带有属性的对象 width 财务报告和审定财务报表 height。 。 。 .

默认情况下或者如果没有通过参数,方法将返回包括滚动条在内的取景口大小. 然而,在某些情况下(如广告),你可能想要获得没有滚动条的取景口大小. 在这种情况下,通过 true 以忽略滚动条.

oViewport.getSize(); // {width: 108, height: 100} including scrollbar width
oViewport.getSize(true); // {width: 100, height: 100} without scrollbars

o-viewport#getScrollPosition()

提供了获取视图站当前滚动位置的可靠方式. 返回带有属性的对象 width, (中文(简体) ), height, (中文(简体) ), left 财务报告和审定财务报表 top

oViewport.getScrollPosition(); // {width: 100, height: 100, left: 0, top: 10}

o-viewport#setThrottleInterval(eventType, interval) 仅使用产品

设定特定事件的解跳/ 喉管间隔[ ]scroll, (中文(简体) ), resize 或者说 orientation[ [ ] [ ] ]. ]. 作为简写,呼叫 setThrottleInterval 1 - 3 个数字将设定间隔 scroll, (中文(简体) ), resize 财务报告和审定财务报表 orientation 依此顺序,例如:. setThrottleInterval(100, undefined, 300) 等于:

setThrottleInterval('scroll', 100)
setThrottleInterval('resize') // which does nothing
setThrottleInterval('orientation', 300)
setThrottleInterval('visibility', 30)

其中每一个的默认值为 100 ms

o-viewport#debug()

打开调试模式(博客事件细节到控制台).

活动

每一个这些定制事件都遭到射击 document.body。每个自定义事件 event.detail.originalEvent 包含对原始浏览器事件的引用和 event.detail.viewport 结果 o-viewport#getSize()。例如:

import oViewport from '@financial-times/o-viewport';

// Fire for all viewport events.
oViewport.listenTo('all');

// Listener for debounced visibility events via o-viewport.
document.body.addEventListener('oViewport.visibility', function(event) {
    console.log(event.type); // oViewport.resize
    console.log(event.detail.viewport); // { height, width }
    console.log(event.detail.hidden); // boolean
});

说明 event.detail.hidden 独有的 oViewport.visibility 活动。 用于 o-viewport 下文详细介绍这些活动.

oViewport.resize

• 无附加属性 .

oViewport.orientation

• 数据。方向 : “ 图像” 或“ 地貌”

oViewport.visibility

• 数据.隐藏:真假

oViewport.scroll

• 数据.scrollLeft:滚动位置的无单位px值
• 数据.scrollTop:滚动位置的无单位px值
• 数据.scrollHeight:滚动高度的无单位px值
• 数据.scrollWidth:滚动宽度的无单位px值

调弦

• oViewport.resize, (中文(简体) ), oViewport.orientation 财务报告和审定财务报表 oViewport.visibility 即如果本地事件连续几次迅速起火 定制事件只会起火一次 n 上次事件之后的毫秒, 其中 n 是节流阀间隔
• oViewport.scroll 被节制,即如果当地人 scroll 事件连续数次迅速起火 定制事件最多每次起火一次 n 毫秒, 在哪个 n 是节流阀间隔

使用 调制解码器 用于定制节奏的方法.

移徙

许可证

版权 (c)2016金融时报有限公司. 版权所有.

该软件在以下 麻省理工学院许可证。 。 。 .