What is the process for eliminating the overflow in this situation?

How can I eliminate the overflow issue with this toggle button?

The functionality of this toggle button is simple - you click on it to turn it on and off.

I've been struggling to find a solution. Every attempt so far has been unsuccessful.

All I want to do is remove the overflow, but I can't seem to figure it out.

If anyone has any suggestions or ideas on how to achieve this, please let me know.

Check out the toggle button here

https://i.sstatic.net/0rp6X.png

(function() {
  "use strict";

  const onOffButton = document.querySelector(".switch");

  function switchButton() {
    onOffButton.classList.toggle("on");
  }
  onOffButton.addEventListener("click", switchButton);
})();
.switch {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  background-color: black;
  width: 150px;
  height: 195px;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black, inset 0 2px 2px -2px white, inset 0 0 2px 15px #47434c, inset 0 0 2px 22px black;
  border-radius: 5px;
  padding: 20px;
  perspective: 700px;
}

...
htmlcssoverflow

Answer №1

Assuming you want to "remove the scrollbars" when referring to "remove overflow", you can achieve this by simply using overflow:hidden on the body:

(function() {
  "use strict";

  const onOffButton = document.querySelector(".switch");

  function switchButton() {
    onOffButton.classList.toggle("on");
  }
  onOffButton.addEventListener("click", switchButton);
})();
.switch {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  background-color: black;
  width: 150px;
  height: 195px;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black, inset 0 2px 2px -2px white, inset 0 0 2px 15px #47434c, inset 0 0 2px 22px black;
  border-radius: 5px;
  padding: 20px;
  perspective: 700px;
}

.switch.on .button {
  transform: translateZ(20px) rotateX(25deg);
  box-shadow: 0 -10px 20px #ff1818;
}

// rest of CSS code goes here

@keyframes flicker {
  0% {
    opacity: 1;
  }
  80% {
    opacity: 0.8;
  }
  100% {
    opacity: 1;
  }
}

@keyframes light-off {
  0% {
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
}
body{
  overflow:hidden;
}
<div class="switch">
  <div class="button">
    <div class="light"></div>
    <div class="dots"></div>
    <div class="characters"></div>
    <div class="shine"></div>
    <div class="shadow"></div>
  </div>
</div>

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

Background image that is vertically responsive

I'm struggling with getting a full-page background image to maintain a consistent margin around all sides, especially at the bottom. I want the image to be vertically responsive using only CSS, without relying on Javascript. Any suggestions on how to ...

javascripthtmlcssresponsive-design

Is the Owl carousel Auto Play feature malfunctioning when hovered over?

I seem to be encountering an issue with the auto play functionality of the owl carousel. I have uploaded and included all the necessary files, and it is functioning properly when initially loaded. The auto play feature works perfectly, but when I hover ove ...

jqueryhtmlcssowl-carousel

Bootstrap Item Carousel - A Sleek Way to Showcase

I'm trying to figure out how to stop the infinite auto-scrolling and make it display per page when clicking the right arrow. Any ideas? $('.carousel.carousel-multi .item').each(function () { var next = $(this).next(); if (!next.leng ...

javascriptjqueryhtmlcsstwitter-bootstrap

Discover the two words before and after a span element using jQuery

data-color="red"I am looking for 2 words before and after the span tags. Here is the html code: <p>This pathway has an inner and an outer wall. The pressure <span data-color="red" class="highlight">inside the</span> eye closes the tun ...

javascriptjqueryhtml

The date picker in Node.js is not syncing with the data from the MongoDB database

I am trying to update specific fields in a Node JS application and I am successfully retrieving values for all the string fields. However, I am encountering an issue with getting the display value in the date picker control. When inspecting the element, I ...

htmlnode.jsmongodb

Unable to watch video on android webview

I'm currently developing a mobile application for Android using PhoneGap, and I'm having trouble with playing HTML5 videos on my web page. The video is not visible and does not play automatically. How can I successfully play a HTML5 video on an A ...

androidhtmlvideo

Issues with Jquery/AJAX function not responding to onChange Event

I am currently working on a project where I need to populate a dropdown menu based on the value selected from another dropdown. However, I am encountering an issue with the function that I am trying to call in the onChange event of the select tag. This is ...

javascriptjqueryhtmlajax

What is the best way to distinguish between errors when there are two forms on a single page using Laravel and jQuery?

I am encountering an issue with my login page where both the login and registration forms are present. Whenever there is a registration failure, the system automatically redirects me to the login form and errors appear in both forms simultaneously. I have ...

javascriptjqueryhtmlcsslaravel

What method was used to incorporate a 2 pixel margin between the th elements on this website?

I've been analyzing the code thoroughly, but I am still unable to decipher how they managed to create a 2px margin between the th elements: The website in question is: Does anyone have any insights on this? ...

htmlcssspacehtml-table

Updating the table row by extracting data and populating it into a form

As part of my project, I am implementing a feature where I can input 'Actors' into a table using a Form. This functionality allows me to select a row in the table and retrieve the data of the chosen Actor back into the form for updating or deleti ...

javascriptjqueryhtml

Assign specific classes to the rows and overall table by extracting information from the first row and first column of the table

My goal is to utilize jQuery in order to dynamically assign classes to the rows and columns of a table based on the classes of the first row and column. For instance: The current HTML code I have is as follows: <table class="numAlpha" border="1"> ...

javascriptjqueryhtmlarraysaddclass

Can you explain the significance of the '#' symbol within the input tag?

I was reading an article about Angular 2 and came across a code snippet that uses <input type='text' #hobby>. This "#" symbol is being used to extract the value typed into the textbox without using ngModal. I am confused about what exactly ...

javascripthtmlangular

What's the most effective method for incorporating lengthy HTML snippets into a single-page application?

As I develop a simple single page application, the focus remains on a few user views to manage local storage data without using any templating framework. Although it's primarily JavaScript/jQuery right now, the thought of incorporating Backbone or ano ...

javascriptjqueryhtmlsingle-page-application

Include an HTML header and footer on every page when printing an HTML document

I designed an HTML page with a header, content, and footer. When I attempted to print the page, it spanned across 2 pages with the header on the first page and the footer on the last page. My goal is to have the header and footer display on every page, si ...

htmlcss

What would be more efficient for designing a webpage - static HTML or static DOM Javascript?

My burning question of the day is: which loads faster, a web page designed from static html like this: <html> <head> <title>Web page</title> </head> <body> <p>Hi community</p> </bo ...

javascripthtmldomcreateelement

Guide on how to use JavaScript to make an HTML5 input field mandatory

I am facing an issue with setting input fields as required based on radio button selection in a form. Initially, all fields should have required=false, but I'm unable to achieve this. No matter what value I assign to the required attribute, it always ...

javascripthtmlrequired

Guidance on utilizing jQuery to display values depending on a dropdown selection

This code snippet displays movie data from a JSON variable in a dropdown list based on the selected city. It also needs to show the movie name and theaters list when a user selects a movie, along with the theater dropdown remaining unchanged. Here is my H ...

javascriptjqueryhtmljson

Require assistance in getting a slider operational

Hello there! I could really use your assistance with this code. I have been trying to make it work using JavaScript, but I'm determined not to incorporate any external JS files. Here is the snippet of JavaScript code I am working with: "use strict"; ...

javascriptjquerycss

Using jQuery to reconstruct a list from a group of div elements

Seeking advice on how to convert an HTML section of divs into list items. Here is a sample of the current HTML structure: <div> <small>2019-10-31 10:41 Customer unregistered</small> </div> <div> <small>2019 ...

jqueryhtml

Troubleshooting Bootstrap 4 .form-inline compatibility issue on Internet Explorer 11

My application has a form styled with Bootstrap 4 that looks how I want it in all browsers except for Internet Explorer 11. To achieve the layout, I used Bootstrap's .form-inline class as suggested in the documentation. The .form-inline class is r ...

htmlcssbootstrap-4internet-explorer-11