小编c_k*_*ick的帖子

确定 snap-scroll 元素的 snap-scroll 事件是否完成

抽象的

我正在使用可滚动元素创建一个图像库。我正在使用 CSS 的scroll-snap功能,它允许我捕捉到滚动条中的元素(图像)。

通过绑定到元素的scroll事件,我在用户滚动元素时应用各种操作(例如预加载、隐藏界面元素等)。其中之一取决于滚动事件,并且需要在滚动完成的确切时刻停止。但是滚动快照给我带来了一种无法预见但尚未处理的情况;

我无法准确确定快速滚动操作是否完成。

我可以在每个滚动上设置一个setTimeout,它会自行取消并重新设置 - 有效地消除抖动 - 如果不重置,最后会被调用。但是设置此值时使用的超时可能意味着在确定滚动完成时“为时已晚”。

底线:如何检查滚动是否完成,因为:

  1. 用户已停止滚动,或者;
  2. 滚动条已到达其捕捉点(scroll-snap-type已设置)

javascript css animation easing scroll-snap

9
推荐指数
1
解决办法
8763
查看次数

旋转文本生成器

我正在构建一个循环文本生成器.生成器将来自多个数组的句子(文本)组合在一起,通过视觉"循环"并附加它们.我认为最好用我现在构建它的基本版本的生成器创建一个小提琴:

说明

基本工作如下:

  1. 句子在单独的阵列中定义(Array1,Array2并且Array3在小提琴)
  2. 定义了第二组数组,包含可以组合的数组(combo0并且combo1在小提琴中)
  3. 在按下"生成"按钮时,将Generate调用该函数,该函数可视化地循环句子中的句子(combo0[0]在小提琴中)
  4. 这个函数循环自己直到句子循环8次(var times = 8在小提琴中)
  5. 完成后,该函数调用提供的回调函数.在这个回调中,它Generate再次运行,这次使用第二个数组(combo0[1]在小提琴中)

回调的原因是我需要"等待"循环效果完成,然后再继续.

问题

虽然这正是我所需要的(而且我非常怀疑这是否是这样做的方法;我在写一个循环自身的函数时总觉得有点奇怪),我有以下问题:

combo数组中,我定义哪个'句子'数组可以是可能的组合.如果有两种组合,这可以正常工作,但有两个以上,我有一个问题:

Generate(combo0[0], i, function(i) { //generate from first array element of combo0, callback to generating from second array of combo0
    Generate(combo0[1], i, function(i) {
        $('div#status').html('Done!'); //show status
        $('input#generate').removeAttr("disabled"); //enable button
    });
})
Run Code Online (Sandbox Code Playgroud)

我必须递归地重写它以适应combo由3个甚至4个选项组成的数组的可能性.如果一个combo数组只包含2个(或1个)数组,这可能会破坏脚本.

这就是我被困住的地方.主要问题是,如果我循环遍历combo数组,例如使用.each();, …

javascript arrays jquery

8
推荐指数
1
解决办法
380
查看次数

在范围(0 - X)内生成唯一编号,保留历史记录以防止重复

我遇到了一个挑战,我需要一个在给定范围内返回随机数的函数0 - X.不仅如此,我还要求返回的数字是唯一的 ; 不复制先前调用该函数时已返回的数字.

可选地,当完成此操作时(例如,范围已经"耗尽"),只需返回范围内的随机数.

怎么会这样做呢?

javascript arrays random jquery

5
推荐指数
2
解决办法
4102
查看次数

orientationchange事件触发scroll&resize事件

对于我正在进行的项目,我遇到了一个奇怪的问题,我在这里(或其他任何地方)找不到答案.

我尝试创建一个小提琴来演示会发生什么,但是由于我的脚本的性质以及jsfiddle的运行方式,它无法正常工作.无论如何,这里是一个指向小提琴的链接,所以至少你会得到代码.

我想要发生什么

执行单个处理器(onViewportChange三个可能的)window事件:resize,orientationchangescroll.根据事件类型,处理程序将确定要执行的操作.听起来很简单.

我做了什么

对于此示例,我限制了处理程序以回显事件类型,以用于测试目的:

var onViewportChange = function(e) {
    alert(e.type);
};
Run Code Online (Sandbox Code Playgroud)

我将处理程序绑定到事件:(我还尝试.bind()了一系列事件,以及几个单独的绑定)

$(window).on({
    'orientationchange resize scroll' : function(e){
        onViewportChange(e);
    }
});
Run Code Online (Sandbox Code Playgroud)

HTML是完全空的,除了任意基本元素(doctype,html,body和ofcourse jquery和这个脚本)

实际发生了什么

现在它变得奇怪了:桌面浏览器上的事件很好(主要是由于缺少方向更改事件触发),但在移动设备上没有(在iOS6 + iPad第3代和iOS6 + iPhone 5上测试).当我旋转设备时;

  • iPad和iPhone火三个:orientationchange,resize其次是scroll
  • iPhone上的Chrome resize随后闪现orientationchange
  • 我借用的Android手机触发orientationchange后跟resize

(请注意,由于竞争条件,事件的顺序可能不准确.)

这就是为什么我将它链接到orientationchange事件:当我删除orientationchange事件(离开resizescroll)时,只有scroll事件在设备轮换时触发,但不再是resize事件.

我不明白为什么所有事件都会立即发生.至少; 我可以想象a resizeorientationchange因为窗口尺寸发生变化而触发的,但是 …

mobile jquery mobile-safari orientation

5
推荐指数
1
解决办法
8108
查看次数