"Pull to refresh" is suppressed by the following javascript source.
$(window).on('touchstart', function (e) {
startY = e.originalEvent.changedTouches[0].pageY;
});
.
.
.
if(useEventListener) {
window.addEventListener("touchmove", function(e){
var currentY = e.changedTouches[0].pageY;
if ($(window).scrollTop() <= 0 && startY <= currentY) {
e.preventDefault();
return false;
}
},{passive:false});
}
The above method is used to prevent swiping from the top of the screen.
You can suppress swiping while you are at the top of the screen,
Swipe suppression cannot be performed if you are not at the top of the screen.
Swipe cannot be suppressed even if "e.preventDefault ()" is called in the middle of "touch move".
I would like to know how to suppress even if you swipe from other than the top.
tandou3
Users receive reputation points by contributing quality content to the forums.
Posts include post and replies published on the forums.
Post authors can mark replies as Accepted to indicate successful solutions.
Apple Developer Forums admins can mark replies as Apple Recommended to indicate an approved solution
Last seen
User for
Post
Replies
Boosts
Views
Activity
When a dialog is generated with a div in Safari on iPadOS 15.0,
There is a problem that the UI of the button and the position of the event listener are different.
The button event does not occur unless the button above the position of the button displayed in the dialog is pressed.
StespsToReproduce:
(1) Display the dialog in the state where the address bar and tab of safari are not displayed on iOS15.
(2) Press the button.
SampleCode(.asp)：
<!DOCTYPE html>
<html id="htmlcontainer" lang="ja">
<head>
<title>Demo</title>
<meta name="viewport" http-equiv="content-type">
<style>
body {
fon-family: Arial, Helvetica, San-serif;
}
.modal {
display: none;
position:absolute;
z-index: 950;
width: 300px;
height: 100px;
border:2px solid gray;
//box-shadow:2px 2px 3px;
border-radius: 4px;
background-color: #eeeeee;
}
#dlgBtn {
margin-top:15px;
margin-left:257px;
}
.modal-overlay {
top:0px;
left:0px;
z-index: 100;
opacity: 0;
disply: none;
position:absolute;
background-color: gray;
}
.html-modal-open {
position: fixed;
overflow-y:scroll;
}
</style>
</head>
<body>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<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>
<button id="myBtn" onclick="openM()">Open Modal</button>
</div>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<div id="myModal" class="modal">
<p><strong>View conversation display</strong></p>
<button id="dlgBtn" onclick="closeM()">OK</button>
</div>
<div id="divfront" class="modal-overlay"></div>
<script>
var modald = document.getElementById("myModal");
var myBtn = document.getElementById("myBtn");
var dlgBtn = document.getElementById("dlgBtn");
var divfront = document.getElementById("divfront");
var p1_element = document.getElementById("htmlcontainer");
function openM() {
modald.style.display = "block";
modald.style.top = document.body.offsetHeight/2 - modald.clientHeight/2 + "px";
modald.style.left = document.body.offsetWidth/2 - modald.clientWidth/2 + "px";
divfront.style.width = document.body.offsetWidth + "px";
divfront.style.height = document.body.offsetHeight + "px";
divfront.style.display = "block";
p1_element.classList.add("html-modal-open");
}
function closeM() {
modald.style.display = "none";
divfront.style.display = "none";
p1_element.classList.remove("html-modal-open");
}
</script>
</body>
</html>