I was creating a webpage with a header that contains a div which should scroll on overflow. Here is the code. You will find a categories div that has 'Home, News, Movies,...' in it. As you decrease the viewport width, the scrollbar 'SHOULD' appear and work well BUT unfortunately, I ended up getting a scrollbar but that does not scroll the content in the div.
What's the problem here? How can I resolve it?
CodePudding user response：
The problem is related to these styles on categories ul:
background: linear-gradient(225deg, rgb(3, 78, 238), rgb(255, 34, 34));
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
To fix this: you should move these styles to the ul.categories li element
let header = document.querySelector('header');
let logo = document.querySelector('header nav .logo');
let category = document.querySelector('header nav .category');
let topCategories = document.querySelector('header nav ul.categories');
let topSearchBtn = document.querySelector('header nav button.search');
function init(){
//change the width of the categories:
let width = logo.offsetWidth category.offsetWidth topSearchBtn.offsetWidth 50;
topCategories.style.width = 'calc(100% - ' width 'px)';
}
init();*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Poppins', Helvetica, Arial, sans-serif;
}
html, body{
height: 100%;
width: 100%;
background-color: white;
color: black;
font-size: 1rem;
}
button{
border: none;
cursor: pointer;
-webkit-tap-highlight-color: none;
}
header{
position: fixed;
top: 0;
left: 0;
right: 0;
max-height: 100px;
min-height: 40px;
background-color: rgb(255,255,255);
box-shadow: 0 1px 20px rgba(0,0,0,0.1);
padding: 0 10px;
z-index: 1000;
}
header nav{
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
}
header nav .category{
background-color: rgb(180, 0, 99);
color: white;
height: 30px;
max-width: 250px;
align-self: end;
display: flex;
padding: 0 8px;
border-radius: 5px;
justify-content: center;
align-items: center;
margin-bottom: 10px;
}
ul.categories{
list-style: none;
overflow-x: auto;
display: flex;
justify-content: flex-start;
align-items: center;
}
ul.categories li{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
font-size: 24px;
text-transform: uppercase;
margin-right: 20px;
background: linear-gradient(225deg, rgb(3, 78, 238), rgb(255, 34, 34));
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}
ul.categories i.fa{
margin-right: 5px;
}
header nav .search{
font-size: 22px;
border-radius: 5px;
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
width: 50px;
height: 50px;
background-color: rgb(3, 78, 238);
color: white;
transition: 0.3s;
margin: 0 0 0 10px;
}
header nav .search:hover{
background-color: white;
color: rgb(3, 78, 238);
} <header>
<nav>
<div class="logo">
<svg width="100" height="61" viewBox="0 0 403 244" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d)">
<path d="M120.6 54H184.2C199.4 54 212.8 56.9333 224.4 62.8C236.133 68.5333 245.2 76.6667 251.6 87.2C258.133 97.7333 261.4 110 261.4 124C261.4 138 258.133 150.267 251.6 160.8C245.2 171.333 236.133 179.533 224.4 185.4C212.8 191.133 199.4 194 184.2 194H120.6V54ZM182.6 167.4C196.6 167.4 207.733 163.533 216 155.8C224.4 147.933 228.6 137.333 228.6 124C228.6 110.667 224.4 100.133 216 92.4C207.733 84.5333 196.6 80.6 182.6 80.6H153V167.4H182.6Z" fill="url(#paint0_linear)"/>
<path d="M355 194L354.8 110L313.6 179.2H299L258 111.8V194H227.6V54H254.4L306.8 141L358.4 54H385L385.4 194H355Z" fill="url(#paint1_linear)"/>
<path d="M55.6 80.4H10.8V54H132.8V80.4H88V194H55.6V80.4Z" fill="url(#paint2_linear)"/>
</g>
<defs>
<filter id="filter0_d" x="0.800003" y="54" width="394.6" height="170" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="20"/>
<feGaussianBlur stdDeviation="5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<linearGradient id="paint0_linear" x1="270" y1="122" x2="122.5" y2="122" gradientUnits="userSpaceOnUse">
<stop stop-color="#CC78FF" stop-opacity="0.15"/>
<stop offset="1" stop-color="#FF008A"/>
</linearGradient>
<linearGradient id="paint1_linear" x1="393.5" y1="122" x2="211" y2="122" gradientUnits="userSpaceOnUse">
<stop stop-color="#011AFF" stop-opacity="0.15"/>
<stop offset="1" stop-color="#FF00E5"/>
</linearGradient>
<linearGradient id="paint2_linear" x1="152.5" y1="122" x2="10" y2="122" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF37AF" stop-opacity="0.15"/>
<stop offset="1" stop-color="#FF0000"/>
</linearGradient>
</defs>
</svg>
</div>
<div class="category">Home</div>
<ul class='categories'>
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-newspaper-o"></i> News</li>
<li><i class="fa fa-film"></i> Movies</li>
<li><i class="fa fa-microchip"></i> Technology</li>
</ul>
<button class="search"><i class="fa fa-search"></i></button>
</nav>
</header>