Create a fixed content scroll effect with an inset box-shadow

I recently stumbled upon a solution at Stack Overflow that effectively created an inset box shadow beneath content. However, I encountered an issue when the outer container div needed to be scrolling due to overflow - the inner div with the box shadow would also scroll along with the content. Is there a way to address this problem?

div {
    height:300px;
    color:red;
    position:relative;
}

div div {
    box-shadow:inset 0 0 10px black;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
<div>
    <div></div>
    a
</div>

Answer №1

If you want to add a shadow overlay, you can use the z-index property to control which element appears on top. This will allow you to decide whether the shadow should be over or under the content.

div {
    height:300px;
    color:red;
    position:relative;
}

div div {
    padding: 10px;
    position:absolute;
    top:0;
    left:0;
    width:95%;
    height:100%;
    overflow: scroll;
    background: none;
    z-index: 99;
}

#overlay{
  display: block;
  width: 95%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  box-shadow: inset 0 0 200px black;
  z-index: 1;
}
<div>
    
    <div>
      lorem ipsum dolor <br />
      lorem ipsum dolor <br />
      lorem ipsum dolor <br />
      lorem ipsum dolor <br />
      lorem ipsum dolor <br />
      lorem ipsum dolor <br />
      lorem ipsum dolor <br />
      lorem ipsum dolor <br />
      lorem ipsum dolor <br />
      lorem ipsum dolor <br />
      lorem ipsum dolor <br />
      lorem ipsum dolor <br />
    </div>   
    <span id="overlay"></span>
</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

Converting a JavaScript IIFE library into a React Component

Hello, I am currently in the process of learning React JS and there are two JavaScript files that I am working on: Polyfill.js -> hosted on github CustomNavbar.js -> created by me Here is the structure of polyfill.js: export default (function(win ...

I am facing difficulties displaying the egin{cases}…end{cases} equation using Jekyll's MathJax

MathJax is used on our course website. We have implemented MathJax in Jekyll and hosted it on GitHub pages. While MathJax works well for simple equations, I have faced difficulties with more complex ones. Despite spending hours investigating and experiment ...

Incorporate a JSON file into the Webpack output separately from the bundle.js file

Is there a way for my webpack application to read a JSON file at runtime without including it in the bundle.js after packaging? I want the JSON file to be available in the package folder but not bundled with the rest of the code. How can I achieve this? ...

Strange glitch in the Trebuchet MS font

I am currently attempting to utilize the jquery.fullcalendar plugin with jQuery UI theming. Everything seems to be functioning properly, except for an issue where the user's selection of a time range (week or day view) is displaced by approximately on ...

With a simple click of a button, I aim to have the ability to set a variable to true

I am looking to create a button that changes to true in the Script section. This will allow for a random number to be displayed in the paragraph element. <!doctype html> <html> <button id="button"> random number </button> ...

Obtain the option tag's name

One of my challenges is working with a dynamically created dropdown in HTML and having a dictionary in the back-end to retrieve keys. As users keep adding options to the dropdown, I face the issue of not having a value attribute like this: <option valu ...

`.svg file appearing slightly fuzzy when magnified in Chrome``

After careful consideration, I've chosen to use an SVG for my website logo. However, I am facing an issue with it rendering properly in Google Chrome. When the zoom level is set at 100%, the image appears blurry, but if I zoom out a couple of times, i ...

Steps to display a text box once the dropdown list is updated

I have a dropdown menu with two options <div class="form-group"> <span class="col-sm-4 control-span">Member Type</span> <div class="col-sm-8"> <select class="form-control" id="membertype" name="me ...

Stopping the parent onclick event from propagating to a child element within a bootstrap modal

I am currently working with angularjs and bootstrap, incorporating nested onclick events using Angular's ng-click in various HTML elements. One is located in a table header to display different sort icons and execute the sorting logic when the header ...

Update the gulp watch function to use gulp@4

We are currently in the process of transitioning from <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fb9c8e978bbbc8d5c2d5ca">[email protected]</a> to gulp@4, and encountering difficulties during the switch. Upon r ...

Identifying and locating white-colored text within an HTML document

My HTML file has the following structure: <HTML> <HEAD> <style> .secret { background-color: black; color: black; } </style> </HEAD> <BODY ...

Tips for customizing the appearance of a jQuery sortable target list prior to dropping items

When using jquery sortable, I am able to customize a placeholder inside a connected list specified in the connectWith option to visualize where the content will be dropped. However, I am struggling to find a way to style the actual list that contains the p ...

Displaying a static image on an HTML5 canvas without any movement

As a novice in canvas game development, I must apologize for my lack of knowledge. I have an image with dimensions 2048px width and 1536px height that needs to be placed within a canvas (the width and height vary on different devices). While I am able to ...

What is causing gog.com to malfunction when accessed through chromedriver?

Can you figure out why the appearance of gog.com differs between Google Chrome (left) and Chromedriver (right)? It's noticeable that things appear distorted and broken in Chromedriver. Even after comparing the two HTML codes, no significant differenc ...

What is the best way to make a CSS class appear in my javascript using the method I have been using before?

I am facing an issue in making this code work properly. It functions correctly for my caption element as there is only one caption tag in my HTML. However, the same code does not work for my TR element since it requires a for loop to iterate through multip ...

Using AJAX to refresh a div upon submitting a form, instead of reloading the entire page

My SQL database generates a table that remains hidden until the search button is clicked to display the results. I want to use ajax to update the table without refreshing the entire page. Currently, when the page refreshes, the table reverts back to being ...

Generate fresh input fields with distinct identifiers using JavaScript

My challenge is to dynamically create new empty text boxes in JavaScript, each with a unique name, while retaining the text entered in the previous box. I struggled with this for a while and eventually resorted to using PHP, but this resulted in unnecessar ...

Discover the secret to halting a CSS animation precisely on the final nth-child in CSS3

I have encountered some difficulty in stopping a crossfade animation on the last nth-child element. Although I am aware of using animation-fill-mode: forwards, implementing it in different places such as in the initial .crossfade declaration did not yield ...

jQuery offset(coords) behaves inconsistently when called multiple times

I am attempting to position a div using the jQuery offset() function. The goal is to have it placed at a fixed offset from another element within the DOM. This is taking place in a complex environment with nested divs. What's puzzling is that when I ...

How can JQuery be used to implement "scrolling" buttons and automatically update the main page with fresh data?

I am attempting to achieve the following: 1 - Use jQuery to update index.html with the content from output.html (only update when there are differences in data, and ideally only update the parts that have changed). 2 - Add two buttons in the header ...