滑动滚动条不会滚动 div
Sliding the scrollbar does not scroll the div
我正在创建一个带有 header 的网页，其中包含一个 div，它应该在 overflow 上滚动。这里是code。您会找到一个类别 div，其中包含 'Home, News, Movies,...'。当您减小视口宽度时，滚动条 'SHOULD' 出现并且运行良好 BUT 不幸的是，我最终得到了一个滚动条但它不滚动div.
中的内容
这里有什么问题？我该如何解决？
问题与类别 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>
我正在创建一个带有 header 的网页，其中包含一个 div，它应该在 overflow 上滚动。这里是code。您会找到一个类别 div，其中包含 'Home, News, Movies,...'。当您减小视口宽度时，滚动条 'SHOULD' 出现并且运行良好 BUT 不幸的是，我最终得到了一个滚动条但它不滚动div.
这里有什么问题？我该如何解决？
问题与类别 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>