Conceal the scrollbar while navigating within the parent container

I'm currently working on implementing a parallax header on my WordPress site using the Divi theme.

Below is the code I have so far:

<div class="parallax">
<div class="parralax__layer parallax__layer--back">
    <img src="https://crispimages.co/wp-content/uploads/2018/05/layer_5.png">
  </div>>
<div class="parralax__layer parallax__layer--base">
    <img src="https://crispimages.co/wp-content/uploads/2018/05/layer_5.png">
  </div>
</div>

For the CSS part:

.parallax {
  perspective: 1px;
  height: 25vh;
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
}
.parallax__layer {
  position: absolute;
  top: 0px;
  right: 0;
  bottom: 0;
  left: 0;
  transform-style: preserve-3d;
}

.parallax__layer--base {
transform: translateZ(-1px) scale(2);
}
.parallax__layer--back {
transform: translateZ(-15px) scale(2);
}

The issue I'm facing involves the header having a separate scroll bar, making it detached from the rest of the page. The parallax effect works fine with overflow set to 'auto', but disabling it breaks the effect.

How can I ensure that the header element scrolls along with the rest of the content while still maintaining 'overflow' as 'auto'?

You can view the problem in action here:

Answer №1

If you want to eliminate the scrollbar, try implementing this CSS rule:

.parallax::-webkit-scrollbar {
    display: none;
}

This solution should address your issue, but keep in mind that it relies on vendor prefixes and will only be effective in webkit-based browsers.

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

Trouble with top attribute functionality within animate function

Why does the top attribute in the animate function of JQuery not seem to work, while the opacity attribute functions correctly in the code snippet below? $(function() { $(window).on('scroll', function() { ...

Conceal anchor links using jQuery by targeting their title attribute

Looking at the html below <li class="static"> <a title="blog" class="static menu-item" href="http://google.com">Blog</a> </li> <li class="static"> <a title="profile" class="static menu-item" href="http://profile.com"> ...

Struggling with my Transform Origin in CSS for SVG

I have two classes (firstCircle & spin) on the first circle on the left, and I'm attempting to make it rotate in place. After removing them from the css so you can see the circle, I am having trouble with transform-origin. My code seems wrong as i ...

Text hidden within the image, each line concealing a separate message

I am having an issue where my image is overlaying the text. I would like the text to wrap around the image and for any hidden text to appear on a different line. How can this be achieved? Here is the CSS code I am using: div.relative { position: relati ...

What are some ways to personalize the depth graph in amcharts?

I am having trouble modifying the depth graph amchart and I'm struggling to grasp how it functions and how to design it like the image below. Below is the link to the original graph that I am trying to customize: Link https://i.stack.imgur.com/nbWd ...

Is there a way to eliminate the additional gap found at the bottom of a div element?

I've been encountering some difficulty when trying to insert an image into a div without any padding. The issue I'm facing is that the sizing doesn't seem to be correct; there's unnecessary extra space at the bottom. Despite my efforts ...

Is there a way to incorporate a delete button for each li element that is included in my list?

I have successfully implemented a to-do list where clicking on an item strikes a line through it and there is a delete button that works. However, I am looking for assistance on how to create a delete button for each newly added li item. var button = do ...

What is the process of adding CSS effects to a button when a keypress activates it?

Do you have a CSS style that transforms the look of a button when clicked on-page? Want to extend this effect to when the button is activated via keyboard? (In essence, browsers allow activating a button by pressing Tab to give it focus and then hitting S ...

Display scrollable content at the bottom

I am currently working on creating a chat application using JavaScript (AngularJS without jQuery) and I am wondering if it is possible to have a scrollable div load to the bottom automatically. While I am familiar with the scrollTo JS property, I do not f ...

What is the best way to modify the selection text background with CSS?

Does anyone know the method for modifying the selection text background in CSS? Many modern websites opt for a personalized background color instead of the traditional blue? ...

Modify the styling of multiple divs using a loop when the page is first loaded

I am working on a loop that generates multiple boxes with masonry layout containing post excerpts. <div class="box"> <div class="image"> <img src="" /> </div> <div class="info"> <h3>//title output with ...

Issue with the style of the inline menu is not functioning properly in IE11

My menu with inline block links is working perfectly in all browsers except for IE11. In Chrome, it looks like this: In IE11, it looks like this: Here is the CSS code snippet: .rlist--inline { list-style: none; padding: 0; margin: 0; } .r ...

Using jQuery to smoothly scroll horizontally to a specific div element

In my project, I aspire to create a layout similar to the BBC website: with a side scroll from section to section. Here is my code and the issue I am encountering: jsFiddle: http://jsfiddle.net/neal_fletcher/kzQFQ/2/ HTML: <div class="wrapper"> ...

Identify and target a particular DIV based on the URL for customization

My webpage has a collection of frequently asked questions (FAQs) on a page called faq.html. Here is an example structure: <div id="faq1">...</div> <div id="faq2">...</div> I am looking to create a pulsating or highlighting effect ...

Creating an HTML page with R Markdown: Placing an image in the upper right corner and adjusting the position of the title

Looking to add a company logo image to the top right corner of my R markdown report, and then shift the title down by 3 or 4 cm for a letterhead-like appearance. Does anyone have suggestions on how I can achieve this in my .Rmd file? Appreciate any assist ...

A Guide to Overflowing Text Above Divs - Even When the Parent Div has a Width of 0%

My webpage, built with Bootstrap 4, features a row with three divs placed horizontally. The divs have different percentage widths and sometimes the center div's width is set to 0%. However, I need to ensure that the text within the 0% div is always v ...

Unable to reveal hidden text with invisible formatting (font-size: 0)

I have a Joomla 3 website where I created a blog using a design-controll template. I made a "new-article" page but realized that some buttons were missing text. Upon inspecting with Firebug, I found that there was a font-size:0 property causing this issue. ...

The CSS code seems to be ineffective when attempting to center elements with a specific width in react.js

Hey everyone, I'm currently working on developing a web application using react-bootstrap and I've encountered an issue with adjusting the width of my row and centering it. I have already created the necessary CSS and JS files, but I am unable to ...

Is it possible to access an external website by clicking on a link within a DIV element?

I have a basic website set up like this sample.php <html> <head></head> <body> <a id="myLink" href="http://sample.com">Click!</a> </body> </html> I displayed this website within a DIV-Container on a ...

The DOMException occurred when attempting to run the 'querySelector' function on the 'Document' object

Currently, I am engaged in a project that was initiated with bootstrap version 4.3.1. I have a keen interest in both JavaScript and HTML coding. <a class="dropdown-item" href="{{ route('user.panel') }}"> User panel </a& ...