指定-ms-viewport时，Div溢出滚动？ [英] Div overflow scrolling when -ms-viewport is specified?

问题描述

在Windows Phone 8中查看的页面上工作，我注意到一个奇怪的行为。当以宽度或高度指定-ms-viewport时，似乎用户无法再在溢出时使用触摸滚动行为：auto或-ms-touch-move：pan-y元素。

Working on a page that is viewed in Windows Phone 8, and I noticed an odd behavior. When -ms-viewport is specified with a width or height, then it seems like users can no longer use the touch scrolling behaviors on an overflow:auto or -ms-touch-move:pan-y element.

任何人遇到此行为，或知道任何解决方法？

Anyone encounter this behavior, or aware of any workarounds?

编辑：在WP8设备上访问此网址进行重现： http://fiddle.jshell.net/V7SR/3/show/light

edit: Visit this URL on a WP8 device for a repro: http://fiddle.jshell.net/Vk7SR/3/show/light

推荐答案

设置 @ - ms-viewport {width：auto} 可能不适用于许多希望在Windows Phone设备上显示反应UI的应用程序。一个工作的选择，允许你设置任何视口宽度你想要设置以下CSS规则：

Setting the @-ms-viewport { width: auto } may not be acceptable for a number of applications that aspire to present a reactive UI on Windows Phone devices. A working alternative that allows you to set whatever viewport width you desire is to set the following CSS rule:

body, html { 
  -ms-overflow-style: none !important; 
}

我复制了原始的格式， =https://gist.github.com/tjanczuk/7419485> https://gist.github.com/tjanczuk/7419485 。您还可以从Windows Phone设备直接导航到HTML页面，网址为 http://htmlpreview.github.io/?https://gist.github.com/tjanczuk/7419485/raw/9a13fc9ad43f2103d8b9e23e25c7b0672a13385f/gistfile1.html

I copied the original repro and fix it up with this rule at https://gist.github.com/tjanczuk/7419485. You can also navigate directly to the HTML page with the fix from a Windows Phone device at http://htmlpreview.github.io/?https://gist.github.com/tjanczuk/7419485/raw/9a13fc9ad43f2103d8b9e23e25c7b0672a13385f/gistfile1.html

这篇关于指定-ms-viewport时，Div溢出滚动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！