我正在开发一个网络应用程序,它-webkit-overflow-scrolling:touch在几个地方使用,以提供溢出的divs惯性滚动.
自从更新到IOS8后,-webkit-overflow-scrolling: touch停止了你能够滚动的任何东西,到目前为止我能够解决这个问题的唯一方法是删除-webkit-overflow-scrolling: touch标准的粘性滚动.请帮忙!
以下是适用于iOS5,6和7的标准类之一的示例:
.dashboardScroll {
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch; /*MAKES OVERFLOWN OBJECTS HAVE INERTIA SCROLLING*/
-webkit-transform: translateZ(0px); /*HELPS THE ABOVE WORK IN IOS5*/
}
我正在创建一个视差网站,我想用鼠标滚轮使页面滚动更顺畅,以获得更好的用户体验.我能得到的最好的例子是这个网站:http://www.milwaukeepolicenews.com/#menu=home-page 如果我可以在我的网站上获得类似的东西,平滑的垂直滚动和滚动惯性,那将是很棒的.
我注意到他们正在使用Brandon Aaron的jQuery鼠标滚轮,它很轻,但我只是一个初学者,不能让它自己工作.
我也注意到他们的mpd-parallax.js:
jQuery(window).mousewheel(function(event, delta, deltaX, deltaY){
if(delta < 0) page.scrollTop(page.scrollTop() + 65);
else if(delta > 0) page.scrollTop(page.scrollTop() - 65);
return false;
})
谢谢!
编辑
我快到了.看看这个小提琴:http://jsfiddle.net/gmelcul/cZuym/它只需要添加一个缓动方法来滚动,就像密尔沃基警察网站一样.
如果您在最新版本的iOS上的iPad设备上访问此页面,则可以按照此步骤操作.
http://fiddle.jshell.net/will/8VJ58/10/show/light/
我有两个新的-webkit-overflow-scrolling元素:touch; 适用的财产和价值.左手灰色区域内容丰富,可以纵向或横向滚动.右边只会在横向滚动.
如果从横向开始(在横向上刷新),您可以使用惯性滚动滚动这两个区域.效果很好.现在将iPad翻转成纵向,只有左侧区域会滚动.这是预期的.但当你翻回景观时,右手区域将不再滚动,而左手区域仍然很好.
很明显如何阻止这种情况发生,但我并不总是有足够的内容来填补这个区域.
那么任何想法？
在此先感谢,
威尔:)
想知道我将如何轻弹或推销UIView,例如http://www.cardflick.co/或https://squareup.com/cardcase演示视频.
我知道如何拖动物品,但是你如何赋予它们重力/惯性.这是由IOS处理的吗？
我试图在屏幕上移动子视图,但我也希望为对象添加惯性或动量.
我已经拥有的UIPanGestureRecognizer代码如下.
提前致谢.
UIPanGestureRecognizer *panGesture = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(handlePan:)];
[self addGestureRecognizer:panGesture];
(void)handlePan:(UIPanGestureRecognizer *)recognizer
{
CGPoint translation = [recognizer translationInView:self.superview];
recognizer.view.center = CGPointMake(recognizer.view.center.x + translation.x,
recognizer.view.center.y + translation.y);
[recognizer setTranslation:CGPointMake(0, 0) inView:self.superview];
if (recognizer.state == UIGestureRecognizerStateEnded) {
[self.delegate card:self.tag movedTo:self.frame.origin];
}
}
再次谢谢.
我注意到鼠标轮事件在mac osx中多次发生.可以归因于惯性功能.
有没有办法解决这个问题？
(自签名ssl请不要担心!) https://sandbox.idev.ge/roomshotel/html5_v2/
我正在使用scrollSections.js https://github.com/guins/jQuery.scrollSections
它使用mousewheel jquery插件:https://github.com/brandonaaron/jquery-mousewheel
我看到很多人都有同样的问题:https://github.com/brandonaaron/jquery-mousewheel/issues/36
有一些解决方案但没有一个与scrollSections插件一起使用.
任何想法如何从JS禁用这个惯性功能？
我试图修复:
// Fix for OSX inertia problem, jumping sections issue.
if (isMac) {
var fireEvent;
var newDelta = deltaY;
if (oldDelta != null) {
//check to see if they differ directions
if (oldDelta < 0 && newDelta > 0) {
fireEvent = true;
}
//check to see if they differ directions
if (oldDelta > 0 && newDelta < 0) {
fireEvent = …我想有人可能以前问了这个问题,但我找不到答案.
我正在为我的游戏引擎编写物理库(2d,目前在actionscript3中,但很容易翻译成基于C语言).
我在找到一个好的公式来计算我的游戏对象的惯性时遇到了问题.
事实是,有许多经过验证的公式来计算凸多边形质心周围的惯性,但我的结构略有不同:我有自己的局部空间的游戏对象.您可以将凸形状(如圆形和凸多边形)添加到此局部空间以形成复杂对象.形状本身也有自己的局部空间.所以有三个层次:世界,物体和形状空间.
使用惯性矩维基百科文章中提供的公式计算形状中每个单独多边形的惯性是没有问题的.
或者在一篇很棒的碰撞检测和响应文章中提供的那些.
但是我想知道如何将它与我的对象结构联系起来,我只是简单地添加对象形状的所有惯性吗？这是另一位作家用来计算三角形多边形惯性的东西,他补充了三角形的所有惯性矩.或者还有更多吗？
我发现这整个惯性概念很难理解,因为我没有强大的物理背景.因此,如果有人能够给我一个答案,最好是在给定质心周围的惯性背后的逻辑,我会非常感激.我实际上是在学习IT - 我大学的游戏开发,但令我非常沮丧的是,他们队伍中的老师都没有在物理领域经验丰富.
我为我的WPF应用程序提供了以下XAML,我将从UWP进行转换:
<ScrollViewer Name="scv_main" Grid.Row="2" ScrollViewer.VerticalScrollBarVisibility="Auto"
PanningMode="VerticalFirst">
<TextBlock Name="txbl_display" Grid.Row="2" Foreground="White"
FontFamily="Lucida Console" FontSize="22" Text="{Binding Path=ContentPath, Mode=OneWay,
UpdateSourceTrigger=PropertyChanged}" Padding="20" TextWrapping="Wrap"
IsManipulationEnabled="True" ManipulationDelta="manipulationDeltaHandler"/>
</ScrollViewer>
我发现的是,事件处理程序e.IsInertial总是错误的.
我认为可能是ScrollViewer处理惯性事件,但是当我删除ScrollViewer时,我仍然无法获得任何惯性事件.我也尝试将ManipulationDelta放在ScrollViewer上,结果相同.
我的最终目标是我希望ScrollViewer在非惯性移动时滚动,但让我控制惯性滑动时发生的事情.
我在UWP应用程序中管理此效果,我将其移植到WPF,如下所示:
<TextBlock ... ManipulationMode="All" ManipulationDelta="TextBlock_ManipulationDelta/>"
然后在代码隐藏中:
if (e.IsInertial) // inertial = swipe, rather than slide
{
// X-Translation - change contents of textblock
if (e.Cumulative.Translation.X <= -500) //500 is the threshold value, where you want to trigger the swipe right event
{
showNext();
e.Complete();
}
else if (e.Cumulative.Translation.X >= 500)
{
showPrevious();
e.Complete(); …我需要保持一个元素的滚动偏移量与另一个元素(实际上是窗口)保持同步,并且我在移动Safari(iPad)上滚动的惯性"滚动"阶段遇到了麻烦.
我有几个div,position:fixed; overflow:hidden我需要保持他们的滚动偏移与窗口的一个同步(意味着整个身体滚动.)通常我会像这样(jQuery)编码:
var $win = $(window),
$div1 = $(...)
$win.scroll(function() {
$div1.scrollTop($win.scrollTop())
})
但是在iPad上测试界面时,我注意到在触摸阶段,当你用手指拖动虚拟页面时,也没有在惯性阶段,当你放开并且页面减速到停下来
我通过注册touchmove事件的处理程序以及事件处理程序来解决拖动阶段scroll.
但我找不到解决惯性阶段问题的方法.div保持静止(并且慢慢地与页面的其余部分不同步),直到惯性运动达到完全停止,此时滚动事件最终被触发并且它跳到位置.
尝试在iPad上滚动它以查看"惯性晃动"问题.不幸的是,我无法让它在jsFiddle上工作,因为iPad在iframe滚动时出现奇怪的行为.
如果我可以在该阶段进行轮询,我可以保持两个元素之间的同步.我试过了setTimeout,setInterval和requestAnimationFrame,但是在惯性滚动阶段它们都没有发射.似乎所有Javascript都在此阶段停止.
问题:
我对Safari中网站的滚动性能不满意.而不是你习惯从原生应用程序滚动的平滑动量滚动,你得到一个笨重的,一旦你举起手指几乎立即停止.
在google上搜索了一下后,我偶然发现了这篇文章:
这确实有效,但似乎有一些副作用,例如jQuery(document).scrollTop()不再起作用,一些绝对/固定元素闪烁.
除了这篇文章之外,我没有在网上找到关于这方面的更多信息,我认为这很奇怪.由于每个人都在寻求提高移动性能/用户体验的方法,并且性能提升感觉很大我不知道:
刚发现似乎还有一个我没注意到的额外副作用: 移动Safari:身体上的惯性滚动和最小的UI行为？