Javascript 使用jQuery mobile touchmove。CSS转换未按预期运行

首先，我可以说我的目标是移动浏览器，并展示我在这里要做的事情（在css转换的帮助下，一个div出现在右下角）。

因此，正如您所看到的，它可以与

滚动

以及在常规浏览器中正常工作。在Chrome Canary的移动仿真中尝试这一点效果很好。把这个带到手机上不会像预期的那样工作。一旦停止“滚动”，将发生

转换。现在我尝试使用jQuery手机
scrollstart
，但这与
scroll
基本相同
我搜索了这个问题，发现了
touchmove
。公平地说，它实际上记录了“滚动”的每一步，所以我把它固定住了。现在，这带来了另一个问题，
转换将不起作用。发生的情况是，它将立即定位在角落中，并将
小部件的“实例”状态保持在其原始位置。



我非常感谢您在这方面的帮助



下面是小提琴演示中使用的代码

<div class="widget">
    <div class="widget__start clearfix">
        <div class="widget__status"></div>
    </div>
</div>
<div class="widget__body"></div>

相关css

.widget__status {
    position: relative;
    float: right;
    height: 40px;
    width: 40px;
    top: 5px;
    right: 20px;
    background-color: #333;
    -webkit-transition: top 1s, right 1s;
}

.fixed .widget__status {
    position: fixed;
    top: -10px;
    right: -10px;
    margin: 0;
}

我使用jQuery mobile作为我的解决方案，为什么它不是一个相关的标记呢？一旦发出事件，转换就会触发。但是，使用触摸事件，您可以完全控制。例如，当用户从x移动到y时，您可以触发转换。@Omar您可以详细说明一下吗？
scrollstart
和
scrollstop
是自定义事件。这些事件在用户开始/停止滚动时发出。因此，您应该等待它们被触发。如果你想在滚动过程中做些什么，你需要修改它们的行为方式。@Omar你能给我一个如何修改
scrollstart
事件的例子吗？
.widget__status {
    position: relative;
    float: right;
    height: 40px;
    width: 40px;
    top: 5px;
    right: 20px;
    background-color: #333;
    -webkit-transition: top 1s, right 1s;
}

.fixed .widget__status {
    position: fixed;
    top: -10px;
    right: -10px;
    margin: 0;
}