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

问题描述

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

有人遇到过这种行为，或者知道任何解决方法吗?

在 WP8 设备上访问此 URL 以进行重现:http://fiddle.jshell.net/Vk7SR/3/show/light

解决方案

设置 @-ms-viewport { width: auto } 对于许多渴望呈现Windows Phone 设备上的反应式 UI.允许您设置所需的任何视口宽度的可行替代方法是设置以下 CSS 规则:

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

我复制了原始 repro 并在 https://gist.github.com/tjanczuk/7419485.您还可以从位于 http://htmlpreview.github.io/?https://gist.github.com/tjanczuk/7419485/raw/9a13fc9ad43d482525/raw/9a13fc9ad43d48f25c9ad43d48f25c9ad43d48f25c9a3d48d2521a13385f/gistfile1.html">http://htmlpreview.github.io/?

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?

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

解决方案

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; 
}

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屋！