Sliding The Scrollbar Does Not Scroll The Div

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

Solution 1:

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');
        functioninit(){
            //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: 01px20pxrgba(0,0,0,0.1);
    padding: 010px;
    z-index: 1000;
}
headernav{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
}
headernav.category{
    background-color: rgb(180, 0, 99);
    color: white;
    height: 30px;
    max-width: 250px;
    align-self: end;
    display: flex;
    padding: 08px;
    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.categoriesli{
    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.categoriesi.fa{
    margin-right: 5px;
}
headernav.search{
    font-size: 22px;
    border-radius: 5px;
    box-shadow: 02px10pxrgba(0,0,0,0.2);
    width: 50px;
    height: 50px;
    background-color: rgb(3, 78, 238);
    color: white;
    transition: 0.3s;
    margin: 00010px;
}

headernav.search:hover{
    background-color: white;
    color: rgb(3, 78, 238);
}

<header><nav><divclass="logo"><svgwidth="100"height="61"viewBox="0 0 403 244"fill="none"xmlns="http://www.w3.org/2000/svg"><gfilter="url(#filter0_d)"><pathd="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)"/><pathd="M355 194L354.8 110L313.6 179.2H299L258 111.8V194H227.6V54H254.4L306.8 141L358.4 54H385L385.4 194H355Z"fill="url(#paint1_linear)"/><pathd="M55.6 80.4H10.8V54H132.8V80.4H88V194H55.6V80.4Z"fill="url(#paint2_linear)"/></g><defs><filterid="filter0_d"x="0.800003"y="54"width="394.6"height="170"filterUnits="userSpaceOnUse"color-interpolation-filters="sRGB"><feFloodflood-opacity="0"result="BackgroundImageFix"/><feColorMatrixin="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"/><feOffsetdy="20"/><feGaussianBlurstdDeviation="5"/><feCompositein2="hardAlpha"operator="out"/><feColorMatrixtype="matrix"values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlendmode="normal"in2="BackgroundImageFix"result="effect1_dropShadow"/><feBlendmode="normal"in="SourceGraphic"in2="effect1_dropShadow"result="shape"/></filter><linearGradientid="paint0_linear"x1="270"y1="122"x2="122.5"y2="122"gradientUnits="userSpaceOnUse"><stopstop-color="#CC78FF"stop-opacity="0.15"/><stopoffset="1"stop-color="#FF008A"/></linearGradient><linearGradientid="paint1_linear"x1="393.5"y1="122"x2="211"y2="122"gradientUnits="userSpaceOnUse"><stopstop-color="#011AFF"stop-opacity="0.15"/><stopoffset="1"stop-color="#FF00E5"/></linearGradient><linearGradientid="paint2_linear"x1="152.5"y1="122"x2="10"y2="122"gradientUnits="userSpaceOnUse"><stopstop-color="#FF37AF"stop-opacity="0.15"/><stopoffset="1"stop-color="#FF0000"/></linearGradient></defs></svg></div><divclass="category">Home</div><ulclass='categories'><li><iclass="fa fa-home"></i> Home</li><li><iclass="fa fa-newspaper-o"></i> News</li><li><iclass="fa fa-film"></i> Movies</li><li><iclass="fa fa-microchip"></i> Technology</li></ul><buttonclass="search"><iclass="fa fa-search"></i></button></nav></header>