我正在创建一个网页，header其中包含一个div应该滚动的网页overflow。这是代码。您会发现一个类别 div，其中包含“家庭、新闻、电影……”。当您减小视口宽度时，滚动条“应该”出现并且运行良好但不幸的是，我最终得到了一个滚动条，但它不会滚动div.
这里有什么问题？我该如何解决？
1 回答
1
问题与类别 ul 上的这些样式有关：
background: linear-gradient(225deg, rgb(3, 78, 238), rgb(255, 34, 34));
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
要解决这个问题：您应该将这些样式移动到ul.categories li元素
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>于 2021-10-09T13:39:23.703 回答