#html #css #scroll #flexbox #overflow
Вопрос:
Я создавал веб-страницу с a header , которая содержит a div , которая должна прокручиваться overflow . Вот код. Вы найдете раздел категорий, в котором есть » Главная страница, новости, фильмы…». По мере уменьшения ширины окна просмотра полоса прокрутки «ДОЛЖНА» появляться и работать хорошо, но, к сожалению, в итоге я получил полосу прокрутки, но она не прокручивает содержимое в div .
В чем здесь проблема? Как я могу это решить?
Комментарии:
1. То, что вы видите, — это фон, обрезанный в форме текста, поэтому он статичен. Фактический текст прокручивается. Чтобы исправить это, вам нужно удалить фон и использовать другой способ градиента текста, который я никак не могу найти. Надеясь, что кто-нибудь сможет направлять. Кроме того, вы должны удалить содержимое justify из mul.categories
Ответ №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>