我在这里有一个问题，我有一个垂直滚动的div填充按钮，在iOS / Safari上，焦点是非常难以预测的。有时当您在div区域中触摸/滚动时，页面本身会滚动。其他时候它的行为应该如此，并滚动div的内容。
我无法滚动页面。有任何想法吗？我已经尝试了所有我能想到的东西而且没有运气。
非常感谢任何帮助。我很难过！
以下链接演示了此问题，您可以在iOS设备上自行试用：https://alcatraz.fawkesengineering.com/tavis/ics-fabriceditor/touch-scroll-ios-issue.html
下面是代码：
<!DOCTYPE html>
<style>
body, html {
margin: 0;
color: white;
height:1000%;
}
.bodyText {
position: relative;
left: 10px;
top: 10px;
font-family: "Arial", Verdana;
word-wrap: break-word;
overflow-wrap: normal;
}
.rightnav {
background-color: #333;
overflow: auto;
white-space: nowrap;
position: fixed;
top: 0;
right: 0;
width: 150px;
height: 100%;
vertical-align: middle;
padding-left: 50px;
-webkit-overflow-scrolling: touch;
}
.rightnav button {
display: block;
padding: 20px;
margin: 5px;
margin-bottom: 100px;
}
.container {
width:100%;
height:100%;
border:1px solid;
}
.left {
width:auto;
height:100%;
background:#444;
padding: 10px;
padding-right: 100px;;
}
.right {
overflow: auto;
height:100%;
width:250px;
background:#444;
float:right;
}
</style>
</head>
<body id='body' ontouchstart="">
<div id="mainmenu" class="rightnav" >
<button >
scroll me
</button>
<button >
scroll me
</button>
<button >
scroll me
</button>
<button >
scroll me
</button>
<button >
scroll me
</button>
<button >
scroll me
</button>
<button >
scroll me
</button>
<button >
scroll me
</button>
<button >
scroll me
</button>
<button >
scroll me
</button>
<button >
scroll me
</button>
<button >
scroll me
</button>
<button >
scroll me
</button>
<button >
scroll me
</button>
<button >
scroll me
</button>
<button >
scroll me
</button>
<button >
scroll me
</button>
<button >
scroll me
</button>
<button >
scroll me
</button>
<button >
scroll me
</button>
<button >
scroll me
</button>
</div>
<div class="container">
<div class="right"> </div>
<div class="left">
<span class = "bodyText" >Tap here and then try to scroll on the right . <br>
The focus is unpredictable. <br> Sometimes the contents in the div will scroll,
other times the page will scroll.</span>
</div>
</div>
</body>