Overflow-y modifies the text color

I am currently delving into the world of HTML and CSS, tackling a specific issue. I have a lengthy list of items and I've applied overflow-y using external CSS. However, there's a hiccup - it changes the font color of the list. Additionally, any guidance on styling the scrollbar to only be visible when scrolling would be greatly appreciated.

#main-div {
position: relative;
}
#container-div {
position: absolute;
right: 0;
margin-top: 15%;
margin-right: 10%;
overflow-y: auto;
width: 600px;
height: 350px;
}
.main-text {
color: aliceblue;
mix-blend-mode: difference;
}
<div id="main-div">
<div id="container-div">
<div id="list" class="main-text">
<h4>title 1</h4>
<ul>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
</ul>
<h4>title 2</h4>
<ul>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
</ul>
<h4>title 3</h4>
<ul>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
</ul>
<h4>title 4</h4>
<ul>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
</ul>
<h4>title 5</h4>
<ul>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
</ul>
<h4>title 6</h4>
<ul>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
</ul>
</div>
</div>
</div>

Answer №1

Maybe you just used the wrong class.

Instead of setting the height on the container-div, try applying your mix-blend-mode to that same element.

Consider this revised code snippet:

#main-div {
position: relative;
}
#container-div {
position: absolute;
right: 0;
margin-top: 15%;
margin-right: 10%;
overflow-y: auto;
width: 300px;
height: 150px;
background-color: #e2e2e2;
color: aliceblue;
mix-blend-mode: difference;
}
<div id="main-div">
  <div id="container-div">
    <div id="list">
      <h4>title 1</h4>
      <ul>
        <li>item 1</li>
        <li>item 1</li>
        <li>item 1</li>
      </ul>
      <h4>title 2</h4>
      <ul>
        <li>item 1</li>
        <li>item 1</li>
        <li>item 1</li>
      </ul>
      <h4>title 3</h4>
      <ul>
        <li>item 1</li>
        <li>item 1</li>
        <li>item 1</li>
      </ul>
      <h4>title 4</h4>
      <ul>
        <li>item 1</li>
        <li>item 1</li>
        <li>item 1</li>
      </ul>
      <h4>title 5</h4>
      <ul>
        <li>item 1</li>
        <li>item 1</li>
        <li>item 1</li>
      </ul>
      <h4>title 6</h4>
      <ul>
        <li>item 1</li>
        <li>item 1</li>
        <li>item 1</li>
      </ul>
    </div>
  </div>
</div>

A background has been included for visualizing the aliceblue color

Answer №2

The font color didn't catch my eye as changing, but if you want to customize the scrollbar, here is the CSS snippet:

#main-div {
position: relative;
}
#container-div {
position: absolute;
right: 0;
margin: 10%;
overflow-y: auto;
width: 600px;
height: 300px;
background: lightblue;
}

/* Styling Scroll Bar */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #c1c1c1; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}
<div id="main-div">
<div id="container-div">
<div id="list">
<h4>title 1</h4>
<ul>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
</ul>
<h4>title 2</h4>
<ul>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
</ul>
<h4>title 3</h4>
<ul>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
</ul>
<h4>title 4</h4>
<ul>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
</ul>
<h4>title 5</h4>
<ul>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
</ul>
<h4>title 6</h4>
<ul>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
</ul>
</div>
</div>
</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

I'm interested in creating an animation for the appendChild() function that gives it a subtle fade-in effect

Hey there! I'm looking to incorporate a fade-in effect into a Chrome plugin that appears using appendChild(). I'm envisioning something like this: document.body.appendChild(div).fadeIn(1000); Is there a way to achieve this? ...

The canvas is responsive to keyboard commands, however, the image remains stationary and unaffected

As I delved into the basics, incorporating canvas, CSS, and JavaScript, a question arose: should the image be housed in the HTML or the JavaScript code? Following this, I added a background color to the canvas and defined properties of the canvas in JavaSc ...

Ul list centered alignment appears misaligned to the left in Safari browser exclusively

I'm experiencing an issue with my menu alignment. It appears perfectly centered in FF, Chrome, and IE, but shifts to the left in the Safari browser. I'm not sure if there is a specific CSS property I need to use to correct this alignment. <d ...

Issue persists with `overflow:auto` even when height is defined

As I was creating a website, I designed an exception holder on the side to capture every error thrown. To prevent the webpage from expanding endlessly in case of multiple errors, I am working on making it scroll instead. My approach involves using CSS an ...

What is the process for implementing hover transitions on link elements?

I am trying to incorporate a transition effect for my links. Essentially, I want the text-decoration (which is currently set to underlink) to gradually appear. Unfortunately, my previous attempt at achieving this has been unsuccessful: #slink{ transit ...

Firefox experiencing issues with overflowing HTML content

I am facing an issue with a table inside a div container where the content exceeds the container size. Interestingly, in Internet Explorer, the parent containers automatically expand to fit the table content. However, in Firefox, the div container only w ...

Retrieving the input value from embedded cells in a specific row of a table

I need the function to calculate the result of the following expression using values from the table below: a+b*c-(e/f) This calculation should exclude rows with e and f. Although I encountered a similar issue before, there was no solution for this spe ...

Converting JSON into HTML format

Seeking guidance as a developer tasked with rendering JSON to HTML on a webpage. I've taken over for someone else and, despite feeling somewhat in over my head, have managed to build the basic structure using Catalyst/Template Toolkit and Dojo. Now th ...

``There seems to be an issue with Firefox's background position percentage

After combining multiple images into one to reduce HTTP requests, I utilized background-position in percentage values to control which image was displayed. Since the width of the images is dictated by the parent element, using percentages rather than pixel ...

Struggling to set the background color for a div element

I am dealing with the following HTML and CSS: <div id="com_loaded"> <div id="com_loaded_userpic"><a href="#" class="tooltip"><img src="pic.jpg" class="img_poster" /><span>Username</span></ ...

Adjust the position of the div so that it remains visible as you scroll

Is it possible to position an element within a container that contains a wide table with overflow property so that the element remains visible while scrolling horizontally through the table data? <div id = "mainContainer" style = "width:300px; overflow ...

Creating movement in an SVG patterned background

Currently in the process of designing a brand new website using NextJS and Tailwind. I am looking to incorporate an infinitely translating background effect that moves towards the bottom right, similar to this example (but with my own unique pattern): htt ...

Issue with Bootstrap 4 Carousel Fading Effect Not Functioning as Expected

I previously had no issues with the code below using Bootstrap version 3. However, after updating to Bootstrap 4 Beta2, the fade transition stopped working. Instead of a smooth transition, the images now just jump to the next one: HTML <div id="carous ...

Adding to a webpage's URL with PHP prior to rendering the content

Currently, I am investigating how to add a random query string at the end of a URL when someone visits my page for the first time. Let's say an individual goes to my website at www.example.com. If everything proceeds as planned, they will land on my i ...

Ensure the top section of the page remains fixed in place

Looking to keep the header section of my webpage sticky at the top while allowing the content section to scroll over it? I need a solution using JavaScript or jQuery that will achieve this effect. Here is the HTML structure: <div id="header"> & ...

jQuery Selectors with Variable

Having trouble incorporating variables in selectors using jQuery. It's a small issue, but quite frustrating! Check out this jsFiddle for an example: The code snippet below is not functioning as expected: var folder_id = "folder"; $("#selects select ...

What is the best way to determine the height of a DIV element set to "auto"?

When setting a fixed height on a div using jQuery, such as $('div').height(200);, the value of $('div').height() will always be 200. This remains true even if the content within the div exceeds that height and overflow is hidden. Is th ...

Align text within HTML with the use of Bootstrap

Example data value category type item1 100 food fruit item2 50 drinks soda item3 75 snacks chips I want to achieve this forma ...

Eliminate Video Time Indicator

Can the video progress bar be removed from this specific video player? I would like it to be integrated into the embed code that I share with others. <iframe id="hapyak-player-157199-8825" marginwidth="0" marginheight="0" frameborder="no" scrolling=" ...

How can I automatically disable certain checkboxes when a specific radio button is selected?

Looking to disable certain checkboxes when a specific radio button is selected. For instance, selecting the first radio button with the id="pz1" should disable checkboxes with matching id values from the thisToppings array. Each radio button cor ...