Screen white on the right side

I am encountering an issue where my screen shows white on the side when I scroll to the right. I am unsure how to remove it and cannot locate the problem in the code. Here is a link to the code: https://jsfiddle.net/y3j01hbt/

In the provided code, there is a white screen appearing when scrolling right. How can I eliminate this white screen? Despite multiple attempts, I am unable to pinpoint the exact source of the error. It may be related to the aos library or another aspect that I have overlooked.

javascriptjquerycsstwitter-bootstrap

Answer №1

To stop horizontal scrolling, simply set the overflow-x property to hidden on your html or body element.

html, body {
  overflow-x: hidden;
  width: 100%;
}

UPDATE

If you are encountering horizontal scrolling due to your AOS styling/script, try replacing instances of data-aos="fade-left" and data-aos="fade-right" with data-aos="fade". This adjustment should resolve the issue. Please note that when using left/right AOS animations, it is recommended to use overflow hidden to prevent any unwanted scrolling effects.

Answer №2

The issue arises from the fade-left-aos-animation within the "À PROPOS" section, causing the scrollbar to disappear when it comes into view.

It is likely a glitch in the aos-library that is causing this problem.

If switching to a different version does not resolve the issue, you can apply a temporary fix by adding overflow:hidden to the parent container.

I have included the following code snippet in your fiddle to address the issue:

#scrollspyHeading6{
  overflow:hidden;
}

New Fiddle Link

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

Eliminate HTML nodes that are not currently visible

I am currently developing a Vue/Vuetify application that showcases a large number of images (10-20k) in a grid view along with some additional information. These images are grouped into different sections, and clicking on an image opens an overlay displayi ...

javascripthtmlvue.jsvuetify.js

Animating the maximum height causes a delay in the performance of other elements

Attempting to adjust the maximum height of a ul. When the max-height property changes (via toggling a class), the height shifts immediately, while the items below the ul maintain the animated height as expected. var expander = $('.skill-expand&apos ...

jquerycssanimationcss-transitions

Exception in posting strings or JSON with react.js

Whenever a user clicks on the Signup button, the process I follow to create an account is as follows: Firstly, a new User entry is created in the database. createUser = () =>{ var xhr = new XMLHttpRequest(); xhr.open('POST', 'http:// ...

javascriptreactjsspringspring-bootxmlhttprequest

What could be causing the inconsistency in the success rate of my Get request, with it working occasionally but returning a

Why is it that my Get request works on occasion, but most of the time it returns a 404 error? I've been experimenting by removing the "next()" function, but it doesn't make a difference. I've also tried placing "res.json(req.user.firstName) ...

javascriptnode.jsreactjsexpresspassport.js

Guide on inserting a row into a table class without unique values using jQuery

I have gathered information on stackoverflow regarding how to use jQuery to add a row to a table. $('.myTable').find('tbody:last').append('WHATEVER CODE'); Although this method seems to be effective, I have come across the i ...

jqueryhtml

Prevent vertical scrolling on touch devices when using the Owl Carousel plugin

Is there a way to prevent vertical scrolling on Owl Carousel when dragging it horizontally on touch devices? It currently allows for up and down movement, causing the whole page to jiggle. If anyone has a solution, I can share the JavaScript file. Appreci ...

javascriptjqueryhtmlcss

Retrieving value from the parent scope using the conventional approach

Today I was puzzled by some unexpected behavior of AngularJS. While using console.log to log $scope, I noticed that there was no key attached to the scope named val1. However, when I used console.log($scope.val1), it returned a value as an object. After ...

javascriptangularjsangularjs-scope

Achieving enlightenment with Satori in NextJS: Transforming SVG to PNG in a NodeJS Environment

I am currently exploring the capabilities of satori and integrating it into my next.js api routes. (I'm unable to utilize the vercel/og package). While I have successfully set everything up, I'm facing a challenge in converting the svg image gen ...

javascriptnode.jssvgnext.jsbuffer

Utilizing jQuery to toggle a dropdown box based on multiple checkbox selections

After conducting a search, I came across a helpful resource on Stack Overflow titled Enable/Disable a dropdownbox in jquery which guided me in the right direction. Being new to jQuery, I found it useful to adapt code snippets to suit my needs. Now, my que ...

javascriptjqueryhtml

My desire is for every circle to shift consecutively at various intervals using Javascript

I'm looking to draw circles in a sequential manner. I am trying to create an aimbooster game similar to . Instead of drawing all the circles at once, I want each circle to appear after a few seconds. The circles I've created currently do not g ...

javascripthtmlcss

Encountering a problem with the divLogoBlock element in the code snippet below

I am experiencing an issue with the code below. The divLogoBlock does not appear when I copy and paste the entire page into Outlook as a signature. I believe there may be a problem with the CSS. Can someone please assist me? <html lang="en"><he ...

htmlcss

It appears that the JavaScript global dynamic variable is undefined as it changes from function to function, suggesting it might be

I'm encountering an issue with the way these two functions interact when used in onclick calls of elements. Due to external circumstances beyond my control, I need to keep track of when and how elements are hidden. Everything works perfectly as inten ...

javascriptscopeglobal-variablesundefineddynamic-variables

Iphone not picking up media queries, while browser resize is working perfectly

Hey there, I'm currently using a theme called Bones on my WordPress site, but I'm encountering some difficulties with the responsive menu on my iPhone. Oddly enough, when I manually resize the window, the menu seems to work just fine. Here' ...

csswordpressmedia-queries

Combine all div elements to create a unified image and then proceed to save it as a jpg file before uploading to the server

These are the divs below: <div style="width:800px; height:420px; position:absolute; top:0px; left:0px; z-index:10; background-image: url('https://3t27ch3qjjn74dw66o1as187-wpengine.netdna-ssl.com/wp-content/uploads/2016/05/052516-800x420-vege-Wallp ...

javascriptphpjqueryjsonajax

Combining AngularJS with Servlets: A Seamless Integration

I am attempting to retrieve a JSON object from a servlet by calling a function through a link in my HTML code. Below is the HTML link that calls the fTest function: <td><a href="" ng-controller="minaplantaCtrl" ng-click="fTest(x.id_camion_descar ...

javajavascriptjsonangularjsservlets

The JQuery script has not been initialized, causing the function to not activate

I keep encountering this error message: Uncaught ReferenceError: toggleOptionsVisibility is not defined at HTMLSelectElement.onchange Here's the HTML code I'm working with: <div> <label asp-for="Type"></label&g ...

javascriptjqueryasp.net-core-mvc

Unable to connect to node.js webserver using the godaddy shared hosting URL

Upon entering www.example.com:3000 into my browser, I am encountering the following error message (where 'example' represents my domain name) This site can't be reached - www.example.com took too long to respond. I have taken the following ...

javascriptnode.jsshared-hosting

Accessing a factory from within another in AngularJS Ionic

My Ionic app has been developed with two separate factories: one called Api, which handles API calls, and another called LDB (local database), responsible for interacting with a local Sqlite database using the CordovaSqlite plugin. While each factory work ...

javascriptangularjssqliteionic-framework

Can we implement attribute selectors in Material-UI while utilizing makeStyles?

Is it possible to extract all the div elements with specific Mui class names such as access-MuiPickersCalendarHeader-switchHeader, access-MuiPickersDay-day? My components are styled using StylesProvider which adds "access" as a prefix to the original Mater ...

javascriptcssreactjsmaterial-ui

Troubleshooting: Angular version 4.3 Interceptor malfunctioning

I have been trying to implement new interceptors in Angular 4.3 to set the authorization header for all requests, but it doesn't seem to be working. I placed a breakpoint inside the interceptor's 'intercept' method, but the browser didn ...

javascriptangular