#javascript #html #jquery #css #bootstrap-4
Вопрос:
Я использую bootstrap 4.6 для веб-страницы, поскольку встроенная навигационная панель не соответствует моим потребностям в мобильной навигации, я пытаюсь изменить ее, чтобы она работала как MODE_SCROLLABLE в Android, поэтому мне нужно, чтобы она активировала ссылку, когда родительский элемент находится в центре прокрутки, а активный элемент отображается в центре.
Чтобы прояснить ситуацию, я добавил рабочий образец (поскольку он предназначен для использования на мобильных устройствах с уменьшенной шириной, его необходимо проверить в chrome как мобильный), вы можете прокрутить его горизонтально, но для активации ссылки вам нужно нажать на нее, и она не центрируется на элементе, когда элемент активен (или нажат).
(Если вы хотите попробовать, просто используйте клавиши со стрелками клавиатуры влево и вправо)
var lastScrollLeft = 0;
var anchoLi = $('#navegacion').width();
var anchoTotal = anchoLi * 4;
console.log(anchoLi);
console.log(anchoTotal);
$('#navegacion').scroll(function () {
var documentScrollLeft = $('#navegacion').scrollLeft();
if (lastScrollLeft != documentScrollLeft) {
console.log('scroll x');
lastScrollLeft = documentScrollLeft;
console.log(lastScrollLeft);
if (lastScrollLeft > anchoLi - 50 amp;amp; lastScrollLeft < anchoLi * 2 ){
$('#navegacion li').removeClass('active');
$('#what').addClass('active');
} else if(lastScrollLeft > anchoLi * 2 - 50 amp;amp; lastScrollLeft < anchoLi * 3 ){
$('#navegacion li').removeClass('active');
$('#where').addClass('active');
} else if (lastScrollLeft > anchoLi * 3 -25 amp;amp; lastScrollLeft < anchoLi * 4){
$('#navegacion li').removeClass('active');
$('#when').addClass('active');
}
}
}); section#segunda-nav{
background: blue;
}
#segunda-nav li {
min-width: 100%;
text-align: center;
}
#navegacion.nav-tabs {
display: inline-flex;
width: 100%;
overflow-x: auto;
-ms-overflow-style: none; /*// IE 10 */
overflow: -moz-scrollbars-none;/*// Firefox*/}
#navegacion.nav-tabs>li.active>a,
#navegacion.nav-tabs>li.active>a:focus,
#navegacion.nav-tabs>li.active>a:hover {
border-width: 0;
}
#navegacion.nav-tabs>li>a {
border: none;
color: #FFF;
}
#navegacion.nav-tabs>li.active>a,
#navegacion.nav-tabs>li>a:hover {
border-bottom: 1px solid cyan;
background: transparent;
}
#navegacion.nav-tabs>li>a::after {
content: "";
height: 2px;
position: absolute;
width: 100%;
left: 0px;
bottom: 1px;
transition: all 250ms ease 0s;
transform: scale(0);
}
#navegacion.nav-tabs>li.active>a::after,
#navegacion.nav-tabs>li:hover>a::after {
transform: scale(1);
}
#navegacion.tab-nav>li>a::after {
background: #21527d none repeat scroll 0% 0%;
color: #fff;
}
#navegacion.tab-pane {
padding: 15px 0;
}
#navegacion.tab-content {
padding: 20px
}
#navegacion.nav-tabs::-webkit-scrollbar {
display: none; /*Safari and Chrome*/
}
.card {
background: #FFF none repeat scroll 0% 0%;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
margin-bottom: 30px;
display: block;
}
#navegacion.nav>li>a {
position: relative;
display: block;
padding: 10px 15px;
}
#navegacion.nav{
flex-wrap: inherit;
}
li.active a{
color: red!important;
font-weight: bold;
}
li.active{
background: cyan;
} <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1 K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2 l" crossorigin="anonymous">
<section id="segunda-nav">
<div class="container">
<div class="row">
<div class="col">
<ul id="navegacion" class="nav nav-tabs" role="tablist">
<li id="description" role="presentation" class="active"><a data-target="" aria-controls="home" role="tab" data-toggle="tab">DESCRIPTION</a></li>
<li id="what" role="presentation"><a data-target="#informacion-programa" data-slide-to="1" aria-controls="profile" role="tab" data-toggle="tab" class="active">WHAT?</a></li>
<li id="where" role="presentation"><a data-target="#informacion-programa" data-slide-to="2" aria-controls="messages" role="tab" data-toggle="tab">WHERE?</a></li>
<li id="when" role="presentation"><a data-target="#informacion-programa" data-slide-to="3" aria-controls="settings" role="tab" data-toggle="tab">WHEN?</a></li>
</ul>
</div>
</div>
</div>
</section> Ответ №1:
Классы начальной загрузки работают таким образом, что их нельзя перезаписать.
Bootstrap не обеспечивает большой гибкости компонентов, возможно, вы можете создать навигационную панель с нуля и добавить свои собственные функции, или вы можете выбрать другие CSS-фреймворки, такие как Tailwind и MaterialUI(если вы используете ReactJS).
Комментарии:
1. Я знаю, что встроенные функции так не работают, поэтому я переопределяю функциональность, как вы можете видеть (если вы просматриваете как мобильное устройство с chrome, вы можете свободно прокручивать), но она не сосредоточена на li и не вызывает «действие» на элементе li a. Это можно сделать с помощью javascript.