What is the reason for having two scroll bars and how can I eliminate one of them?

Is there a way to remove one of the two vertical scrollbars on my webpage? Lorem ipsum is included for testing purposes. Apologies for the content being in another language.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
}

body {
  background-color: #262626;

  font-family: "Roboto Slab", serif;

  position: relative;
  overflow-x: hidden;
}

main {
  width: 100vw;
  height: 100vh;
}

#backdrop {
  width: 90%;
  height: 100%;

  margin: 0 auto;
  margin-top: 1rem;
  border-radius: 1rem 1rem 0 0;

  background-color: #727365;
}

#home-link {
  color: #f2f2e4;
  text-decoration: none;
  font-size: 1.7rem;
  font-family: "Space Mono", monospace;
  font-weight: 400;

  position: absolute;
  top: 1.95rem;
  left: 2.6rem;
}

/* Hamburger menu */
#menu a {
  text-decoration: none;
  color: #3f403b;
}

#menu a:hover {
  color: #0c0c0c;
}

... (CSS code continued)

<!DOCTYPE html>
<html lang="sv">
  ... (HTML code continued)
</html>

Lorem ipsum is just filler text for scrolling demonstration. Apologies for some content being in a different language.

htmlcssscrollbar

Answer №1

Adjust the css for html to change overflow property from hidden-x to overflow:hidden

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  overflow: hidden;
}

body {
  background-color: #262626;

  font-family: "Roboto Slab", serif;

  position: relative;
  overflow-x: hidden;
}

main {
  width: 100vw;
  height: 100vh;
}

#backdrop {
  width: 90%;
  height: 100%;

  margin: 0 auto;
  margin-top: 1rem;
  border-radius: 1rem 1rem 0 0;

  background-color: #727365;
}

#home-link {
  color: #f2f2e4;
  text-decoration: none;
  font-size: 1.7rem;
  font-family: "Space Mono", monospace;
  font-weight: 400;

  position: absolute;
  top: 1.95rem;
  left: 2.6rem;
}

/* Hamburger menu */
#menu a {
  text-decoration: none;
  color: #3f403b;
}

#menu a:hover {
  color: #0c0c0c;
}
...
... (Remaining CSS and HTML code is unchanged)
...

<!DOCTYPE html>
<html lang="sv">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Överdäckningen | Startsida</title>
    <link rel="stylesheet" href="css/style.css" />
    <script src="script/js.js"></script>
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@200;300;400&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Space+Mono&display=swap"
      rel="stylesheet"
    />
  </head>
... (Remaining HTML code is unchanged)

Answer №2

<!-- start snippet: javascript hide: false console: true babel: null -->

By deleting the main element, the code will function properly

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

Unable to implement CSS styles on the provided HTML code

I'm currently working on integrating evoPDF into my asp.net application. When I click on a part of the HTML file, I send that portion using AJAX. So far, everything is working well up to this point. However, when I try to use the following methods fro ...

c#htmlasp.netcssevopdf

jsoup - locate element and delete it along with the element preceding it

In my Android app, I am working on extracting data from a stock market historical prices table. However, there are certain rows in the table that need to be removed for clarity. Specifically, I am trying to remove a row in the third tr. I have managed to r ...

androidhtmljsoup

Is it compatible to use Node.js and SOCKET.IO framework in conjunction with jquery?

Is there any conflict in using Node.js and jQuery together to fetch data from a PhoneGap app to the server? ...

jqueryhtmlnode.jscordova

Personalized cursor that blinks while utilizing window.history.replaceState

While navigating between sub-pages, I utilize the window.history.replaceState method to replace URLs in my web application. However, I have noticed that my custom cursor briefly blinks (replaced by cursor: default) when the current URL is replaced with a n ...

javascripthtmlcss

Issues surrounding the determination of CSS attribute value using .css() function within a variable

I have been working on a function to change the color of a span dynamically from black to a randomly selected color from a predefined list. However, I am encountering an issue with the .css("color", variableName) part of my code and suspect that my synta ...

javascriptjquerycss

What is the best way to calculate the cumulative score from the 24 values provided? Should I include an additional SELECT statement or simply sum up the individual scores?

I am trying to generate a query that displays scores for a user across 24 different questions. I have managed to load these scores into a table, but now I want to also include the total score for the same user. Adding a second SELECT statement with SUM() ...

phphtmlmysql

Unable to establish the characteristic of 'undefined' to null while using React

For my application, I require the following functionality: If a question's value is null, then the checkbox should appear as indeterminate. Otherwise, it should be checked or not-checked accordingly. The issue arises when I try to update the questio ...

reactjshtmlcheckbox

What is the best way to stretch Font Awesome icons horizontally within a message box and incorporate an image into a uniform circle design using Bootstrap?

I have encountered two issues that I need help with. Firstly, following my tutorial did not result in pictures that are as uniform as the design. Here are the comparison pictures: the first one is from the tutorial and the second one is what I coded. htt ...

htmlcssbootstrap-4bootstrap-5

What is the expected output format for htmlspecialchars?

When I try the following: echo (htmlspecialchars("andreá")); I expect to see So, assuming that if I do echo (htmlspecialchars_decode("andreá")); I would get andreá. However, instead of the expected result, I see Additionally, when I run echo ...

phphtmlutf-8

Having trouble resolving the signature of a class decorator when invoked as an expression with @Injectable in Angular

Error Message: Unable to resolve the signature of a class decorator when called as an expression. The argument type 'ClassDecoratorContext' is not compatible with the parameter type 'string | symbol | undefined'. After creating a book ...

javascripthtmlangulartypescriptngrx

Default behavior in Fullcalendar 6 allows for rendering links on both days of the month and weekdays

Is there a way to customize the rendering of days and weekdays in Fullcalendar React? Currently, they are displayed as links by default (<a>{dayContent}</a>), but I'm looking to have them rendered as <div> or <span>. Any sugges ...

javascripthtmlreactjsfullcalendarfullcalendar-6

Tips for implementing a slide up animation on a dynamic element

I have one div and a button. When the button is clicked, I am appending another div. After appending the second div, I want to add a slide-up animation to the first div and a slide-down animation to the second using jQuery. <div class="main"> & ...

javascriptjqueryhtmlcssanimation

Arranging divs in a horizontal line while keeping the content organized in a vertical manner within the footer

I've been searching for a while now, but I haven't found any solutions that actually work. This might be repetitive, so my apologies in advance. The issue at hand is aligning three divs horizontally to create a footer, while maintaining a vertic ...

htmlcssblockfooter

How to exchange the values of two select boxes using the select2 plugin in JavaScript or jQuery

I have successfully implemented two select boxes, each displaying different country names with flag images using the select2 plugin. The values are dynamically fetched from a database and displayed in the code snippet below. JS CODE $(".currencyconverter ...

javascriptjqueryhtmljquery-select2

What is the best way to create a multi-line title within a div element?

Is there a way to make the div tag display multiple lines in a tool-tip on mouse hover instead of just one line? Here is the code I am currently using: <div title="Have a nice<br />day">blah</div> ...

javascriptasp.nethtml

Verify the fonts that are functioning correctly

Despite using the "dancing script" Google webfont and adding it through @font-face, font-family, I am unable to see it in the browser. I would like to know how to determine which fonts are correctly uploaded and rendering properly while viewing a website ...

javascripthtmlcssfonts

The function getComputedStyle('background-color') will return a transparent value that does not inherit from any ancestor element

When using getComputedStyle, it is expected to return the final computed CSS property value. However, for background-color, browsers tend to return "transparent" (or rgba(x,x,x,0)) instead of computing the inherited value from ancestors. The method only s ...

javascriptcssbackground-colorgetcomputedstyle

What might be causing the button switch case JavaScript functionality to not work properly?

In my Worklight project, I have a code snippet that is supposed to capture the value of a button that a user clicks on and then display that value in a label. However, when I run the project, none of the other functions I have defined seem to work. Strange ...

javascriptjqueryhtmlibm-mobilefirst

What steps can be taken to prevent the progress bar from extending beyond the boundaries of the

Hey there, I'm facing a little issue with my website. I'm working on adding a skill progression bar section and have a sticky navbar in place for easy navigation. However, as I scroll down, the progress bars seem to overflow into the navbar. Any ...

htmlcssanimationcss-animations

Basic CSS3 animation

I seem to be having trouble making the transition effect work in this piece of code I want to change the text alignment from left to right, but it's not working. The code is very simple. <style> /* Default State */ div { background: green; ...

csstransition