Windows Surface Edge +讲述者在div弹出窗口中滚动不受尊重 [英] Windows Surface Edge + Narrator scroll in div popup not honored

查看：95 发布时间：2019/6/15 6:04:25 iewebdevelopment

本文介绍了Windows Surface Edge +讲述者在div弹出窗口中滚动不受尊重的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个带可滚动Div弹出菜单的html页面。当我在Windows Surface（浏览器边缘）中浏览该页面并且在Div中滚动时Div没有工作（尝试用两根手指向上/向下滑动）。即使打开了可滚动的div弹出窗口，用两根手指向上/向下滑动
实际上滚动父页面而不是div本身。

我有创建了一个示例html来重现它，下面是代码存根。

使用它的步骤

将以下代码放在.htm页面中
在Windows Surface
Pro + Edge浏览器+讲述人中浏览此页面（接受允许阻止的内容以防万一任何）
点击打开
模态按钮
尝试用两根手指向上/向下滚动

预期行为

Div pop应该能够向上/向下滚动

实际行为

忽略Div弹出窗口中的滚动但实际页面正在滚动。

代码

<！DOCTYPE html> 
 
< html> 
 
< head> 
 
< style> 
 
 / *模态（背景）* / 
 
 .modal { 
 
显示：无; / *默认隐藏* / 
 
; / *留在原地* / 
 
 / *坐在最前面* / 
 
 padding- / *方块位置* / 
 
 
 
 
 
宽度：500px; / *全宽* / 
 
身高：500px; / *全高* / 
 
 / *如果需要启用滚动* / 
 
 background-color：rgb（ 0,0,0）; / *后备颜色* / 
 
背景颜色：rgba（0,0,0,0.4）; / *黑色带不透明度* / 
 
} 
 
 / *模态内容* / 
 
。模式内容{
 
背景颜色：#fefefe; 
 
保证金：自动; 
 
填充：20px; 
 
边框：1px实线＃888; 
 
宽度：80％; 
 
} 
 
 / *关闭按钮* / 
 
 .close {
 
 color：#aaaaaa; 
 
 float：right; 
 
字体大小：28px; 
 
 font-weight：bold; 
 
} 
 
 .close：hover，
 
 .close：focus {
 
 color：＃000; 
 
 text-decoration：none; 
 
游标：指针; 
 
} 
 
< / style> 
 
< / head> 
 
< body> 
 
< h2>模态示例< / h2> 
 
<！ - 触发/打开模态 - > 
 
< button id =" myBtn"> Open Modal< / button> 
 
<！ - 模态 - > 
 
< div id =" myModal"> 
 
<！ - 模态内容 - > 
 
< div> 
 
< span>& times;< / span> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< / div> 
 
< / div> 
 
< script> 
 
 //获取模态
 
 var modal = document.getElementById（'myModal'）; 
 
 //获取打开模态的按钮
 
 var btn = document.getElementById（" myBtn"）; 
 
 //获取< span>关闭模态的元素
 
 var span = document.getElementsByClassName（" close"）[0]; 
 
 //当用户点击按钮时，打开模态
 
 btn.onclick = function（）{
 
 modal.style.display = "块英寸; 
 
} 
 
 //当用户点击< span>时（x），关闭模态
 
 span.onclick = function（）{
 
 modal.style.display =" none" ;; 
 
} 
 
 //当用户点击模态之外的任何地方时，关闭它
 
 window.onclick = function（event）{
 
 if（event.target == modal）{
 
 modal.style.display =" none" ;; 
 
} 
 
} 
 
< / script> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< p>模态中的一些文字..< / p> 
 
< / body> 
 
< / html>

解决方案

您好JNaveen，

根据您的描述和代码，我很抱歉我可以不能重现您的问题，但我找到了一些有关如何解决此问题的教程，请检查：

防止正文滚动但允许叠加滚动：

https://stackoverflow.com/questions/9280258/prevent-body-scrolling-but-allow-overlay-scrolling

解决移动设备中模态弹出式Vew的背景滚动问题：

http://burnignorance.com/phonegap-tips-and-tricks/resolving- background-scrolling-issue-modal-popup-vew-in-mobile-devices /

最好的问候，

Eric Du

I have a html page with scrollable Div popup menu. When I browse that page in the Windows Surface (browser Edge) with Narrator on scrolling in the Div is not working (try to swipe up/down with two fingers). Even though the scrollable div popup is opened, swiping up/down with two fingers actually scrolling the parent page instead of the div itself.

I have created a sample html to repro it and below is code stub.

Steps to use it

Put the below code in a .htm page
Browse this page in the Windows Surface Pro + Edge browser + Narrator on (accept allow blocked content in case any)
Click on Open Modal button
Try to scroll up/down with two fingers

Expected behavior

Div pop should be able to scroll up/down

Actual behavior

Ignored the scrolling in the Div popup but actual page is getting scrolled.

Code

<!DOCTYPE html>

<html>

<head>

<style>

/* The Modal (background) */

.modal {

    display: none; /* Hidden by default */

    ; /* Stay in place */

     /* Sit on top */

    padding- /* Location of the box */

    

    

    width: 500px; /* Full width */

    height: 500px; /* Full height */

     /* Enable scroll if needed */

    background-color: rgb(0,0,0); /* Fallback color */

    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */

}

/* Modal Content */

.modal-content {

    background-color: #fefefe;

    margin: auto;

    padding: 20px;

    border: 1px solid #888;

    width: 80%;

}

/* The Close Button */

.close {

    color: #aaaaaa;

    float: right;

    font-size: 28px;

    font-weight: bold;

}

.close:hover,

.close:focus {

    color: #000;

    text-decoration: none;

    cursor: pointer;

}

</style>

</head>

<body>

<h2>Modal Example</h2>

<!-- Trigger/Open The Modal -->

<button id="myBtn">Open Modal</button>

<!-- The Modal -->

<div id="myModal">

  <!-- Modal content -->

  <div>

    <span>&times;</span>

    <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

    <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

    <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

    <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

    <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

    <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

    <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

    <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

    <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

  </div>

</div>

<script>

// Get the modal

var modal = document.getElementById('myModal');

// Get the button that opens the modal

var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal

var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal

btn.onclick = function() {

    modal.style.display = "block";

}

// When the user clicks on <span> (x), close the modal

span.onclick = function() {

    modal.style.display = "none";

}

// When the user clicks anywhere outside of the modal, close it

window.onclick = function(event) {

    if (event.target == modal) {

        modal.style.display = "none";

    }

}

</script>

    <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

    <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

    <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

    <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

    <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

    <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

    <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

    <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

    <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

    <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

    <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

    <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

    <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

    <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

    <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

    <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

    <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

    <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

    <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

    <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

    <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

    <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

    <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

    <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

    <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

    <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

    <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

    <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

    <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

    <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

    <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

    <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

    <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

    <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

    <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

    <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

    <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

    <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

    <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

    <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

    <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

    <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

    <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

    <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

    <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

                <p>Some text in the Modal..</p>

</body>

</html>

解决方案

Hi JNaveen,

According to your description and code, I am sorry that i can not reproduce your issue, but i found some tutorials about how to fix this issue, please check:

Prevent body scrolling but allow overlay scrolling:

https://stackoverflow.com/questions/9280258/prevent-body-scrolling-but-allow-overlay-scrolling

Resolving Background Scrolling Issue Of Modal Popup Vew In Mobile Devices:

http://burnignorance.com/phonegap-tips-and-tricks/resolving-background-scrolling-issue-of-modal-popup-vew-in-mobile-devices/

Best Regards,

Eric Du

这篇关于Windows Surface Edge +讲述者在div弹出窗口中滚动不受尊重的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

Windows Surface Edge +讲述者在div弹出窗口中滚动不受尊重 [英] Windows Surface Edge + Narrator scroll in div popup not honored

问题描述

相关文章

其他开发语言最新文章

热门教程

热门工具

登录关闭

Windows Surface Edge +讲述者在div弹出窗口中滚动不受尊重 [英] Windows Surface Edge + Narrator scroll in div popup not honored

问题描述

相关文章

其他开发语言最新文章

热门教程

热门工具

登录 关闭

登录关闭