EDIT:该片段在嵌入问题时工作正常,但在编辑时则不然;这让我意识到这与可以滚动的底层容器有关...我在手机上测试了这一点,锤子在没有滚动条的小区域上工作得很好overflow
财产。
我更新了代码片段以反映这一点。
问题是:如何让它在需要垂直滚动的容器上工作?
我正在 Angular PWA 中构建滑动导航。我可以在 Chrome 桌面上使用它,但在我的手机上却无法使用。当我在 Chrome 开发工具中尝试触摸模拟器时,它根据方向/设备而变得疯狂,大多数情况下根本没有检测到任何东西。panleft
and panright
工作稍微好一些,但由于某种原因完全破坏了锤子(可能是因为我没有对它进行反跳,它只是在短时间内停止检测而没有任何错误)。
我究竟做错了什么?
当与 Chrome 开发工具中的设备模拟器一起使用时,下面的代码片段的行为类似
const hammer = new Hammer(document.documentElement);
hammer.on('swipeleft swiperight', event => {
console.log(event.type);
});
body,
html {
height: 100%;
}
.content {
margin-top: 20%;
width: 100%;
height: 80%;
background: orange;
overflow-y: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
Can touch this
<div class="content">Can't touch this (on mobile / emulator)</div>
实际代码
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
constructor(
private gameService: GameService,
private routerService: RouterService
) {}
ngOnInit() {
this.gameService.gameInit();
const hammer = new Hammer(document.documentElement);
hammer.on('swipeleft swiperight', event => {
if (event.type === 'swiperight') {
this.routerService.navNext();
} else if (event.type === 'swipeleft') {
this.routerService.navPrev();
}
});
}
}
正确答案只是粘贴touch-action: pan-y !important
在你的班级中具有溢出属性
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)