问题
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
回答1:
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
回答2:
Setting the width to auto (like below) instead of device-width seems to solve the scrolling issue. I took the source from your page(http://fiddle.jshell.net/Vk7SR/3/show/light/), packaged it as a WP8 app and tried on a Lumia 920.
@-ms-viewport {
width: auto;
}
来源：https://stackoverflow.com/questions/13996387/div-overflow-scrolling-when-ms-viewport-is-specified