Toggle the checkbox to either allow or prevent scrolling within the div element's content

I have successfully used jQuery to append content to a div on my website.

In addition, I have applied CSS to the div with the following styling:

#data {
  height: 700px;
  position: absolute;
  left: 0;
  right: 0;
  overflow-y: auto;
  vertical-align: bottom;
  padding-left: 10px;
  margin-bottom: 110px;
  font-family: 'Open Sans', sans-serif;
  color: black;
}

When the content of the div exceeds its height, it automatically scrolls to the bottom. Now, I am looking to add a checkbox that will control the scrolling behavior - scrolling when checked and stopping when unchecked.

I attempted to remove the overflow-y property from the CSS but it did not produce the desired result.

Does anyone have a suggestion on how to solve this issue?

javascriptjqueryhtmlcss

Answer №1

To prevent scrolling, you can utilize the overflow property with a value of hidden:

$(':checkbox').change(function() {
  $('div').toggleClass('no-scroll', !this.checked);
}).change();
div {
    width: 100px;
    height: 100px;
    overflow-y: scroll;
}
div.no-scroll { overflow-y: hidden; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  lorem ipsum dolor sit amet consectetur adipscing elit. lorem ipsum dolor sit amet consectetur adipscing elit. lorem ipsum dolor sit amet consectetur adipscing elit. lorem ipsum dolor sit amet consectetur adipscing elit. lorem ipsum dolor sit amet consectetur
  adipscing elit. lorem ipsum dolor sit amet consectetur adipscing elit. lorem ipsum dolor sit amet consectetur adipscing elit. lorem ipsum dolor sit amet consectetur adipscing elit. lorem ipsum dolor sit amet consectetur adipscing elit. lorem ipsum dolor
  sit amet consectetur adipscing elit. lorem ipsum dolor sit amet consectetur adipscing elit. lorem ipsum dolor sit amet consectetur adipscing elit. lorem ipsum dolor sit amet consectetur adipscing elit. lorem ipsum dolor sit amet consectetur adipscing
  elit. lorem ipsum dolor sit amet consectetur adipscing elit. lorem ipsum dolor sit amet consectetur adipscing elit. lorem ipsum dolor sit amet consectetur adipscing elit.
</div>

<label>
  <input type="checkbox">
  Allow scrolling?
</label>

Answer №2

$('#checkbox').on('change', function() {
 if(this.checked){
 //execute scroll function
 }else{
 //revert scroll function
 }
});

Utilize this code snippet to track checkbox changes and perform necessary actions accordingly

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

"Enhanced jQuery confirmation dialog plugin with full screen functionality and automatic

My current web-based production tracking system isn't getting the attention it needs from users, so I'm in the process of creating a full-screen alert and confirm function to ensure they pay closer attention. The idea is for alerts to remain on t ...

javascriptjqueryajax

Adjusting the Height of the Video Jumbotron in Bootstrap

One of my main goals is to create a jumbotron with a video that plays, occupying 100% width and 70% height of the screen. However, I am facing an issue where the video follows the scrolling behavior when I don't want it to. Specifically, as I scroll d ...

htmlcssbootstrap-4

What is the best way to position elements at the top and bottom of a container?

I'm struggling to align one of the elements in my container to the top while using flexbox. All elements are currently aligned to the bottom, but I want a specific text to be at the top of the container. jQuery(document).ready(function($) { ...

htmlcssflexbox

What is the best method for creating a header design in CSS?

My website code is pretty standard <div class="header"></div> <div class="site-inner"></div> <div class="footer"></div> How can I achieve a header background like the one shown in the image? Do I need to set the entire ...

htmlcssheaderfrontendabsolutelayout

Using a locally hosted HTML page to update a JSON file stored on my computer

In my current project, I need to reorganize data stored in an array named unknown. Each item in this array needs to be moved either to a new array called good or another one called bad. let data = { "bad":[], "unknown": ["b", "a", "d", "g", "o", ...

javascriptpythonhtmlnpm

Incorporate AJAX into your Javascript code for ordering

My issue arises when pointOnMap() is executed before xmlPreparer(), even though they are called in the correct order. I suspect this has something to do with the use of AJAX, as parseXML creates the object that pointOnMap() requires to be initialized befor ...

javascriptjqueryajax

Is there a problem with the string comparison in my JavaScript code?

I am dealing with various XML files specific to different operating systems. Here is an excerpt from the SunOS XML: <osname>SunOS </osname> This data is extracted using jQuery: var osname = $(this).find('osname').text(); However ...

javascriptjqueryxmlxslt

Exploring ways to incorporate new data into a JSON array using PHP?

After sending 4 inputs via Ajax to a php file, I am wondering how to load a JSON file and then add new data with PHP. <input type="text" id="name"> <input type="text" id="surname"> <input type="text" id="mobile"> <input type="text" id ...

phpjqueryjsonfile

Changing a numeric string into a number within an Angular 2 application

Looking for advice on comparing Angular 2 expressions. I have an array of data stored as numeric strings in my database and I need to convert them to numbers before applying a condition with ngClass for styling purposes. Any suggestions on how to perform ...

javascriptangular

Angular 2 404 Error persists despite successful retrieval of data from Oracle database using Backend Nodejs URL entered directly into the browser

Recently, I've been working on displaying data in my Angular frontend that is fetched from an Oracle DB connected to my Node backend. When I access the physical API link, the data appears and is displayed in the backend console.log. I'm wonderin ...

javascriptnode.jsangularoracle

Tips for preventing CORS errors while rendering an image on a canvas

Working on a project for my coding bootcamp where I need to overlay bandaids on an image of a bear using canvas. The main challenge is to check the color of the area that users click to ensure they don't put bandaids on the white space around the actu ...

javascripthtmlcanvasdropbox

What methods can I use to accomplish the transformation of superimposed images?

Struggling with transforming a content box on my webpage. I have a div containing three overlapping images positioned using Grid, and I want to scale one of them to fill the entire div when scrolled over. While I managed to achieve this effect, I'm un ...

javascripthtmlcssvue.js

Creating HTML code from a multidimensional array is a useful skill to

I am looking to use PHP to generate HTML code similar to the following: <li id="821">Accessories for tablets and cell phones <ul> <li id="426">Cell Phone Accessories <ul> <li id="675">Stands and Docks</ ...

phphtmlarraysmultidimensional-array

Sharing data from parent to child components in Vue.js: A guide to passing references

I need some help with this code snippet HTML Code: <div class="col-xs-4"> <h3 class="text-center">Incomplete task</h3> <div class="well" style="max-height: 300px;overflow: auto;"> <ul id="check-list-box" ...

javascriptvuejs2vue.js

Distinguishing Between server.listen() and app.listen() in Google Apple Engine

I am currently working on a NodeJS + Express application. While running it locally, I have the following code: const port = 3001; server.listen(port, () => { console.log(`App listening on port ${port}`); }); However, when deploying to GAE, I switch ...

javascriptnode.jsexpressgoogle-app-enginesocket.io

The Modal Textarea refreshes each time it is clicked

Whenever I try to type on the modal with 2 textareas, it stops and exits the textarea. The issue seems to be with onChange={event => setTitle(event.target.value)}, but I'm not sure how to fix it. <Modal.Body> <form onSub ...

javascripthtmlreactjsbootstrap-modal

The Yeoman Angular Coffee router is not routing properly and displays an error message "cannot GET"

Struggling with getting the router to load a basic template after setting up a Yeoman angular scaffolder installation. Here's my configuration: // index.html <body ng-app="mvmdApp"> <div class="container" ng-view=""></div>// not ...

javascriptangularjscoffeescriptrouteryeoman

Display the Express response in an HTML element by utilizing the fetch API

I am currently developing a small node/express project that showcases the bcyrpt hashed value of user input. While I have been successful in displaying the hashed value in the server's console.log, I am facing difficulties in injecting this value into ...

javascriptnode.jsexpressfetch

A guide on retrieving JSON data from an AJAX request using Angular UI Bootstrap

Greetings Friends, I have experience with traditional JavaScript and a little bit of JQuery. Now, for my new JAVA Web Based project, we need to utilize the latest technology to quickly build dynamic web pages. I don't have time to test all the widget/ ...

jqueryjsonangularjstwitter-bootstrap

Is it possible to include an if/else statement within a tailwind class in React components?

I want to dynamically change the background color of a div based on a condition. If the condition is true, I want the background color to be white; otherwise, I want it to be black. Despite trying to achieve this using an if/else statement, the background ...

javascriptreactjs