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

What is the best way to switch an element's attributes using only JavaScript?

As I crafted this inquiry, I noticed that most of the analogous questions were along the lines of this one (where the user seeks to toggle an element's class using pure JS) or that one (where the user wants to toggle other attributes with jQuery). My ...

javascripthtml

Incorporating Ace Editor into a jQuery UI Resizable Element

I am attempting to create a resizable Ace editor by placing it inside a resizable component. Despite my efforts with the jQuery UI Resizable component, I am unable to get the ace editor to display within the resizable component. Code: <!doctype html> ...

jqueryhtmljquery-uiace-editor

Using Polymer in Chrome Extension content script

Currently, I am experimenting with incorporating Polymer into a chrome extension. My main objective is to take advantage of styling encapsulation in order for my content scripts to operate independently from the CSS on the visited webpage. To begin, I hav ...

javascripthtmlgoogle-chrome-extensionpolymer

Connecting onClick event to a dynamically created div using Dojo

While working with dojo 1.9.2, I encountered an issue when trying to add an onClick function to a dynamically created piece of HTML code like so: clickableDiv = "<div data-dojo-attach-point=\"testBtn\">Click Me!</div>"; self.racks.in ...

javascripthtmldojo

"Utilizing datatables to efficiently submit form data to the server-side

I'm curious for those who utilize the Datatables javascript plugin, is there a way to replicate this specific example using server-side data? The current example I came across has its data hardcoded directly in the HTML. ...

javascriptjquerydatatables

Unable to use jQuery to choose an item from a dropdown menu and reveal a hidden text box

Seeking assistance in displaying a paragraph with text and a textbox when a specific option is selected from the dropdown menu on my form. Previously used code for radio buttons, but encountering issues with this scenario. Any guidance would be greatly app ...

javascriptjqueryhtmldrop-down-menuforms

Managing image alignment in flexbox containers with nested rows and columns

In the following design demonstration, there are three blocks to explore. Block 1: Consists of three columns. The middle column contains two rows, both set to flex:1. Block 2: Also has three columns. The middle column includes two rows, but with a unique ...

htmlcssflexbox

Execute Jquery ajax only on the initial invocation

When I am using ajax post in jQuery to build a portion of a page, I am encountering an issue where it only runs once. Below is the code snippet I am working with: <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery ...

javascriptjqueryhtmlajax

Sending data via Ajax to a separate web page

I need help with sending the selected value of a dropdown box to another page using ajax. Despite trying various solutions found online, I am still not getting any results. The id of the dropdown is email_select, and I have double-checked that the URL it ...

jqueryajax

Facing issues while attempting to retrieve the generated PDF through an Ajax-triggered controller action

I am having trouble downloading a PDF/XLSX file from the controller. I have tried using both jQuery and Ajax, but I can't seem to get it to work. Here is an example of the code in the controller: var filestream = new FileStream(pdfoutputpath + " ...

jqueryasp.netajaxasp.net-mvc-4asp.net-core

Loading screen displayed while transitioning between routes within Angular

I have been struggling to implement a loading spinner in my project. How can I display a loading screen when changing routes in Angular? Here is the HTML code snippet: <div *ngIf="showLoadingIndicator" class="spinner"></div> ...

cssangulartypescript

Align section titles to the right of the screen in Zurb Foundation 4

I'm in the process of incorporating sections to develop a navigation system on a basic webpage. However, I require it positioned on the right side of the screen. The default arrangement generated by Foundation with the use of "vertical-tabs" is "tabs ...

jqueryzurb-foundation

JavaScript Tutorial: Storing HTML Text in the HTML5 Local Storage

I am looking to save the text that is appended using html() every time I click on a button. The goal is to store this text in HTML 5 local storage. $('#add_new_criteria').on('click',function(){ $('#cyc_append').html(&apo ...

javascriptphpjqueryhtml

What is the method for activating -webkit-animation/transition-property for :before and :after pseudo elements?

Is there a way to activate the -webkit-animation for :before and :after pseudo elements? It seems that in this demo http://jsfiddle.net/4rnsx/, the animation is not working for :before and :after elements. I am attempting to make it work using Mootools ...

csswebkitcss-transitionspseudo-element

Leveraging CloudKit's CKQueryOperation while implementing dependencies

Embarking on the journey of working with CloudKit, so please be patient as I learn. A Little Background During WWDC 2015, Apple presented a session on CloudKit which can be found here. In this session, they advised against creating chaining queries and ...

iosswiftcloudkit

Is there a peculiar issue with CSS float:right in IE9?

These are the styles I'm using: For the parent container: div.musicContainer { width:820px; height:54px; margin-bottom:20px; } And for the child containers: div.hardcorePlayer { width:400px; float:left; border:n ...

csshtmlinternet-explorer-9

Unusual activity observed in HTML5 contenteditable functionality

Within a list item, I have a span element. <ul> <li>text part 1 <span class="note">this is a note</span> text part 2 </li> <li>text part 3</li> </ul> When you double click on th ...

javascripthtml

Request Denied: Ajax communication to external origin blocked

Hello everyone, I am currently attempting to send data via ajax to my API website in order to insert it into my database. However, I am encountering an error that reads: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote re ...

phpjqueryajax

Using jQuery UI Date Picker to Show a 5-Digit Year in a Dropdown Menu

I'm not interested in solving the deca-millennium bug (which won't affect us for another 8,000 years ;)) but I do want to show the 5-digit year on the date-picker widget for users to see (which is amazing, by the way). For example, 02005, 03013. ...

jquerydatepicker

How can I iterate through the contents of each directory in AJAX without encountering duplicates?

My webpage is currently displaying the output like this: FOLDER1 images/FOLDER1/folder1_img.jpg images/FOLDER2/folder2_img.jpg images/FOLDER3/folder3_img.jpg FOLDER2 images/FOLDER2/folder2_img.jpg images/FOLDER3/folder3_imgjpg FOLDER3 images/FOLDER3/fol ...

phpjqueryajax