iPad screen not displaying overflow for x and y axis

I'm encountering an issue with displaying the scrollbar on a div while using an iPad device.

Currently, I am utilizing: 

-webkit-overflow-scrolling: touch;

Although this is functioning properly, my goal is to have the scrollbar visible without the user needing to touch the div in order to activate it!

Specifically, I would like the overflow-y to be visible only when accessing the page on an iPad, and then once the user interacts with the div, show only the overflow-y!

Is there a way to achieve this?

jqueryhtmlioscssoverflow

Answer №1

If you want to dynamically alter the appearance of your website, JavaScript is necessary to modify the style or manipulate classes.

Cascading Style Sheets (CSS)

.match{
    overflow-y:scroll;
}
.match.post-scroll{
    -webkit-overflow-scrolling:touch;
}

JavaScript (with jQuery)

$(".match").one("click", function(){
    $(this).addClass("post-scroll");
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The jQuery script designed to verify the page height doesn't appear to be functioning as intended

Below is a snippet of jQuery code that I'm working with: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> hasVBar=""; hasHBar=""; $(docume ...

javascriptjqueryhtmlcssdom

What are the steps to successfully implement "Pointermove" event delegation in Safari iOS for parent/child elements?

I've encountered an issue that I'm struggling to find a solution for. My goal is to implement an event delegate using pointermove on a parent container, and I need to be able to detect when the event transitions between a child element and the pa ...

javascriptioswebeventssafari

How jQuery is causing the root path to be duplicated when using the load() function

Why is my root path being duplicated in this code snippet? function handleClasses(id) { var category = $('#location').children().eq(4).text(), rootPath = ("http://localhost/site/" + category), element = $('#wantedDiv') ...

jqueryfunctionurlload

Tips for discovering the exact positions of child divs that are Nth siblings within a parent div

I have designed a new calendar interface with dynamic functionality. When the user clicks on any time slot displayed in IMAGE1, a span element is created dynamically to represent 8 hours starting from that clicked time. My question is, how can I access th ...

javascriptjqueryhtmlcss

Discover the art of utilizing two distinct binding strings, wherein upon the selection of either, the alternate binding string shall automatically be

Having to use two different bindingstrings is a requirement due to a tool used for creating PDFs. My objective is to have the corresponding bindingstring turn "Off" when a user clicks on either the Yes or No button, and have the clicked button turn to "Yes ...

javascriptjqueryknockout.js

Encoding a string for use in a URL

After receiving a JSON data object, I extract a string from it using the following code: NSDictionary *jsonDictionary = [NSJSONSerialization JSONObjectWithData:data options:0 ...

iosobjective-cjsonurl

The Bootstrap 3 Navbar displays a #EEEEEE color when a link is hovered over

I have not specified a hover color in the stylesheet for links to be #EEEEEE. I want the navbar hover effect to blend in with the navbar background, creating a seamless transition when hovered over. For reference, here is my current stylesheet code: Paste ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Is it necessary for two sibling elements to be of the same type in order for their margins to collapse together?

I am currently working on enhancing the visual appearance of a Bootstrap 4 card and encountered an issue: https://i.stack.imgur.com/p8Qzhm.png The spacing between the About the gig heading and the top Date item appears to be uneven. I would like to make ...

htmlcssmargin

What is the best way to showcase the final div at the top with CSS?

I'm working with 4 separate divs, with the last one acting as a footer. Is there a way to position this last div at the top using CSS? ...

csslayouthtml

What is the best way to eliminate borders on a span element so they collapse seamlessly?

When using the tryit editor on this html and narrowing the result window (to around 200px), the border ends up inside the span as it spans across multiple lines. Is there a way to make the border "collapse" so that it forms a single irregular border around ...

css

jQuery Event not Triggering on Newly Added Element

I have been searching for a solution to this problem and despite coming across numerous options (many of which are outdated), nothing I have attempted has proven successful. The issue arises with my file upload script, where dynamically added table rows c ...

jquery

Inspect every div and perform an action if the criteria are met

I need assistance with adding text inside a specific div based on certain conditions. Currently, all the div elements are being populated with the added text. Please review my code for more clarity on what I am trying to achieve. Can you suggest the most e ...

jqueryhtml

Segment will expand completely upon inserting a new division

Lately, I've been trying to simplify things by consolidating my JavaScript functions into one file instead of using multiple separate files. The idea was to merge all the functions together and wrap each one in its own function so that they can be eas ...

javascripthtmlcss

The mdSidenav service encounters difficulties locating a component within an Angular component

Trying to understand why an Angular .component(), which contains a <md-sidenav> directive, cannot be located from the component's controller. Angular throws the error message: No instance found for handle menu The complete component code is ...

javascriptangularjshtmlangularjs-1.5

How can you switch alignment from left to right when the current alignment settings are not functioning as expected in HTML?

I need the buttons +, count, and - to be right-aligned on my page. The numbers on the right are taking up the same amount of space, while the names on the left vary in length. I want the buttons to always remain in the same position, regardless of the name ...

htmlcssangularstyles

How can I use jQuery to access the parent node in an XML document?

I have been trying to extract the top-level 'label' attribute from the XML code below using jQuery, but I haven't had any luck so far. I have already converted it into a DOM object, but the results are not what I expected. Does anyone have a ...

javascriptjqueryxml

Why is the image cut in half on mobile devices but displaying correctly on computer screens? Could it be an issue with

There seems to be an issue on mobile screens that does not occur on computer screens. When the user clicks on the image, it disappears, and when they click another button, it reappears. However, there is a problem with how the image appears - it is cut off ...

javascriptjqueryhtmlcss

Is it possible for an <input> tag in PHP AJAX to have an "action" attribute similar to a <form> tag?

Forms typically use an action attribute to specify where the data should be posted, such as a .php file. Do <input> elements have this action attribute as well? The answer is likely no, but I am curious to understand what concept I may be misunders ...

javascriptphpjqueryhtmlajax

Organizing list items into vertical columns

Could you help me with UL/LI syntax and how to create a wrapping list? For example, I would like to display: 1 2 3 4 5 6 As: 1 4 2 5 3 6 Currently, I have a header, content, and footer all set with specified heights. I want the list to wrap when ...

htmlcsshtml-lists

The image I want to show is invisible on the CSS custom radio button

I'm having trouble creating a custom radio button that displays the image I want. The current setup doesn't seem to be working as expected. label { font-weight: lighter; cursor:pointer; } input[type="radio"] { display:none; } in ...

cssbuttonradio-button