I've successfully implemented an input element with a click event listener that triggers a function to make another element visible using the CSS rule "display:block;".
The element in question has the following styling rules:
.elementExample
{
display:none;
position: fixed;
top: 0;
left: 0;
z-index: 5;
width: 100vw;
height: 100vh;
background-color: white;
font-size: 1.3em;
overflow: hidden;
-ms-overflow: hidden;
}
This element is designed to appear at the top of the screen to provide autocomplete results for user selection on mobile devices.
While everything works as intended, I am facing difficulties in preventing scrolling on the entire page when an iOS user is focused on the input box. I want scrolling to be limited to only the results list within the element. Here's the code snippet I tried:
html .inputHighlightText:focus
{
overflow: hidden!important;
-webkit-overflow: hidden!important;
-moz-overflow: hidden!important;
-o-overflow: hidden!important;
-ms-overflow: hidden!important;
}
// JavaScript functions to control scrolling behavior
this.preventDefault = function(e) {
e = e || window.event;
if (e.preventDefault)
e.preventDefault();
e.returnValue = false;
}
this.disable_scroll_mobile = function(el = null){
// Implementation details to prevent scrolling
}
this.enable_scroll_mobile = function(){
// Implementation details to enable scrolling
}
this.disable_scroll_mobile(); // Disable scrolling initially
Despite trying various solutions, I'm still unable to restrict scrolling for iOS users when they are actively using the input field. How can I achieve this to allow scrolling only within the displayed results?