Can anyone provide a solution for disabling scroll on the window but still allowing scrolling within a text area? I attempted to use the following code, but it ended up disabling everything entirely:
$('html, body').css({
overflow: 'hidden',
height: '100%'
});
Would a setup similar to this be suitable for your needs?
<div class="container">
<h1>heading</h1>
<div class="scrollable">
Text that will scroll. Text that will scroll. Text that will scroll. Text that will scroll. Text that will scroll. Text that will scroll. Text that will scroll. Text that will scroll. Text that will scroll.
</div>
</div>
<style>
.container {height: 110px; width:100px; overflow:hidden;}
.scrollable {overflow:auto;width:100%;height:30px}
</style>
Check out the codepen example here: https://codepen.io/idlethumbs/pen/WZmEgQ
Here is a suggestion for you:
$('body').css({
overflow: 'hidden',
height: '100%'
});
Additionally, in the textarea include:
style="overflow:auto;"
Creating a solution for mobile web page...
Implement a function to disable the scroll event
var preventTouchScroll = function(event){event.preventDefault();};
Attach this function to an element so that when it is touched, scrolling on the document will be disabled.
$('#your_element').click(function()
{$(document).bind('touchmove', preventTouchScroll)});
document.ontouchmove=function(e){e.preventDefault();} //Include this for iOS Safari compatibility, tested on iOS 12.x
Remove the binding
$('#your_element').click(function()
{$(document).unbind('touchmove', preventTouchScroll)});
document.ontouchmove=function(e){return true;} //Restore default behavior in iOS Safari
Hopefully, this guide is helpful!
I encountered an error 400 while attempting to make an Ajax call in .NET core 2.0 with entity framework using jQuery 2.2. This is how my Controller Method is structured: [HttpPost] [ValidateAntiForgeryToken] public JsonResult RetrieveDateCollectio ...
I have been working on integrating iScroll into my application using the javascript-jquery.mobile.iscroll plugin. My goal is to apply it to enable scrolling for a listview component on a specific page while keeping the filter fixed just below the header, a ...
Feeling pretty stuck at the moment. Here's what I have visually right now: I added a caption in Comic Sans and an arrow using MS Paint. Each line with color swatches is wrapped in a p tag. The goal is to center these p tags on the page (as they are ...
I have successfully implemented functionality that allows the value of an input to be changed by clicking a checkbox. This works without any issues. Now, I am facing the challenge of automatically checking the checkbox when the page loads, but only if the ...
I am trying to style external links by adding a pseudo :after element right after the link itself, but I'm having trouble getting it to work on the same line. Here is the CSS code I have: a:not([href*="domain"])::after { content: url(data:image/svg+ ...
I recently set up modernizer.js to check if a page supports drag and drop functionality. Initially, I had it set up so that one div would display if drag and drop was supported, and another div would show if it wasn't. However, I ran into issues with ...
Is there a way to use Javascript in a browser to make the escape key on the keyboard go back? For instance, when visiting this page and clicking the "Fullscreen" link, it would be great to simply press the escape key and return to the previous page. What ...
My image (.png) has a white border only in Firefox, despite the CSS border property being set to 0. Is there a solution to remove this unwanted border around the image? ...
I have this piece of code where I am currently checking for duplicates using the isDuplicate boolean. However, I now want to enhance my code by comparing another property called colorId and then setting the isBigger property for the larger one :) Do you ha ...
I had the idea to create a game where players have to flip cards to reveal what's on the back, but I'm struggling to get the background image to display properly. As a newcomer to Vue, I'm not sure if I made a mistake somewhere. My intuition ...
Hi there, I am fairly new to SASS and do not consider myself a programming expert. I have ten aside elements that each need different background colors depending on their class name. Even after going through the SASS documentation, I am still unable to f ...
Is there a way to await an event on a specific element using Playwright? Similar to page.waitForEvent, but focusing only on a particular element rather than the entire page. More information can be found in the documentation. ...
I'm in the process of developing a website using Vue.js for the frontend and Django for the backend. I've made sure to include the csrf token in every request from the frontend to the backend to prevent any 403 Forbidden errors. All requests are ...
I previously inquired about how to refresh a specific section of a JSP page using Spring MVC on this platform. I attempted to send a value via AJAX to my Controller, but encountered difficulties. However, I managed to overcome it without utilizing JSON. ...
Recently, I've been facing a peculiar issue while developing a web application. The purpose of this app is to capture about 10 seconds of video intermittently from the device webcam and then upload it to a server. For this functionality, I utilized th ...
I have a jQuery script in another processing.js file that is included in the HTML file containing the form. $("#1st_submit").on("click", function(event) { var ServiceType = $("#ServiceType").val(); var locality = $("#locality").val(); $.ajax( ...
I have a list of library names and I want to fetch the author's name for each one. To do this, I loop through each library name and make an asynchronous call. My goal is to return all the author names along with their corresponding library names once ...
Having trouble with a custom text area called a math field. I'm currently interning on a project to build a math search engine, where users can input plain text and LaTeX equations into a query bar. The issue I'm facing is that sometimes when th ...
Suppose I want to achieve the following: function doA(callback) { console.log("Do A") callback() } function doB() { console.log("Do B") } function doC() { console.log("Do C") } doA(doC) doB() I expect the output to be: Do A Do B Do C However ...
I am facing an issue with my form which includes a data-attribute holding a URL to an API JSON file: <form class="product" action="#" data-url="dist/scripts/main.js"> [...] </form> My goal is to transfer the URL from the data attribute to ...