How can I make sure to consider the scrollbar when using viewport width units?

I've been working on developing a carousel similar to Netflix, but I'm facing an issue with responsiveness. I've been using a codepen example as a reference:

Check out the example here

The problem lies in the hardcoded width and height used in the example. I'd prefer to make it responsive by utilizing percentages for measurements. My initial thought was to use the viewport width units (vw), however, this approach didn't solve the issue as it doesn't take into account the scrollbar. This leads to each carousel item being wider than intended when set to 20vw (aiming for 20% of viewport size) due to the inclusion of the scrollbar.

Any suggestions on how I can resolve this issue?

javascriptcss

Answer №1

Check out this example I created: Link

In the example, I am attempting to display five items with an arrow pointing to the right. The 6th item should be hidden behind the arrow, but the width of the arrow is not accurate.

Each item has a width of 18.4vw ( (100-8)/5=18.4). I have added padding on both sides totaling 4vw (subtracting 8 from total width), resulting in the following CSS for the arrow layer:

position:absolute;
right:0;
width:4vw;

This ensures that the arrow remains fixed to the right side.

The issue arises because 18.4vw is based on the viewport size, and when there is a scrollbar present, the width calculation becomes inaccurate due to the scrollbar breaking the proper measurements.

I hope this clarifies what I am trying to achieve.

Kind regards.

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

What is the best way to renew an access token with axios?

I have been struggling to understand the concept of refreshing tokens after reading numerous articles on the topic. They all seem too convoluted for me to grasp. Could someone please simplify it for me? Here is an overview of what I am trying to achieve: ...

javascriptreactjsaxiostoken

The Three.js environment experiences lag and a decrease in performance

In the threejs scene, there is a sphere geometry and a plane geometry. The sphere is textured with an image, while the plane geometry is textured with 2D text. The plane geometry is also attached with a click event. When clicking on the plane geometry, ...

javascriptthree.js

Best method for connecting user input with a class

I'm currently working with a WYSIWYG editor (Tinymce) that allows users to post YouTube videos. In order to make the video content responsive, I need to add the class "video-container" around any "iframe" tags inserted when users paste a YouTube link ...

javascriptjqueryiframetinymcevue.js

Move router parameters to separate files to streamline and organize code

I have encountered a bit of an issue. I currently have the following code in my routing.js file where I define both my parameter and route. I have moved the routes to a separate router instance in my routing.js file, but I am struggling to separate the par ...

javascriptnode.jsexpressmean

Obtaining Mouse Click X, Y, and Z Coordinates with Three.js

I am currently utilizing version 68 of three.js. My objective is to gather the X, Y, and Z coordinates upon clicking somewhere on the canvas. Despite following the steps outlined in this guide, I am encountering a consistent Z value of 0: Mouse / Canvas X ...

javascriptthree.jsmouse-coordinates

how to style a page with a CSS arrow shape

Can someone help me figure out how to create an arrow similar to the one in this button using CSS? https://i.sstatic.net/gQi0l.png I've been able to create triangle-like arrows like the one below #triangle_arrow { top: 3pt; content: ...

csscss-shapes

What is the most effective way to reset the state array of objects in React JS?

I'm facing a challenge in resetting an array of objects without having to rewrite the initial state value again. Initial state const [state, setState] = useState([ {name: 'abc', age: 24}, {name: 'xyz', age: 20} ]) Is there a metho ...

javascriptreactjsarraysreact-reduxstate

Tips for effectively managing 404 errors in Angular 10 with modular routing

I'm facing challenges with handling 404 pages within an Angular 10 application that utilizes modular routing architecture. Here is the structure of my code: |> app |-- app.module.ts |-- app-routing.module.ts |-- app.component{ts, spec.ts, scss, ht ...

javascriptangulartypescriptangular-router

Retrieving HTML elements from the website address

Imagine having a URL like www.example.com. On this webpage, there is a DOM element <a>. To programmatically click on this element, you would typically use document.getElementById('#link')[0].click(). The challenge arises when dealing with ...

javascriptnode.jsdomonclickdom-events

The Bootstrap modal is not properly clearing all attribute properties when it is hidden

Alrighty, so I've got this modal set up: <div id="modal-container" class="modal fade" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content center-block" style="displ ...

javascriptjqueryhtmlcsstwitter-bootstrap

The use of res.sendFile() in node.js is not recognized

While utilizing node.js along with mySQL, I encountered a problem. Upon starting the server, everything seems to be fine. However, upon accessing 127.0.0.1:3000, an error message stating that res.sendFile() is not defined appears. My intention is to send ...

javascriptmysqlnode.js

Having trouble using functions with dynamically loaded content via AJAX in JQuery

I am facing an issue with my code. I am trying to dynamically fetch some data and display it. I have checked the request using firebug and it seems to be successful, but the problem arises when I try to execute the activeImage() function. The images are no ...

javascriptjqueryajax

Unlocking the power of popups with Angular

As a beginner in AngularJS, I have encountered an issue where a popup appears when clicking on the "login/signup" button. Now, I want the same popup to appear when clicking on the "upload resume" button as well. Below is the code that is currently working ...

javascriptangularjs

Struggling with validating forms with JavaScript

I'm having trouble with the following JavaScript code: <script type="text/javascript"> function checkDetails(search) { var search = documment.getElementById('query'); if(search.value ==''||search.val ...

javascripthtmldom-events

How can I address the variations in CSS appearance between Firefox and Google Chrome?

I'm currently working on a table with two cells in each row just for fun. For the first row, I want both cells to display the same picture. To achieve this, I wrote the following CSS: tr:nth-child(1){ background-image:url("cat.jpg"); background-size: ...

htmlcssgoogle-chromefirefox

JavaScript and inverted brackets

Why does Javascript allow the use of inverted parentheses in function calls? I'm currently using a Node console on the CLI with Node version 0.10.25. function a(){ return 42 } a() // -> 42 a)( // -> 42. Strange behavior? function b(t){ return ...

javascriptnode.js

Is there a way to adjust the dimensions of Google charts within a Bootstrap tab for a more customized appearance?

I've been working on a page that features tab navigation using Twitter Bootstrap and I want to include Google charts within each tab's content. However, I've encountered an issue where the charts are appearing in different sizes despite spec ...

javascriptjquerytwitter-bootstraptwitter-bootstrap-3dom-events

This content consists of a header, footer, and middle section with an unknown height, allowing

I am attempting to create a webpage with a header and footer div of unknown height (or minimum height) and a scrollable middle content when the content increases. The challenge is to ensure that all three sections fit within the screen. I have tried the f ...

cssresponsive-designfooter

Retrieve the HTML element by providing its specific index within the DOM structure of the document

I am working with the HTML source of a document stored as a string and have the index i which indicates where an element starts within this string. I am looking to create a function called getElementByIndex(i) that will return the appropriate JavaScript D ...

javascriptstringdomelement

Is there a way to ensure that all elements on a page display properly across all screen resolutions without being cut off?

My website consists of three main elements: pictures, Cards (containing pictures and various typography), and Buttons. These elements are arranged in a column layout. The issue I am facing is that the pictures and buttons get cut off on the screen due to ...

cssreactjsflexboxmaterial-ui