Как прокрутить блок по горизонтали до ID внутри него
Мой код:
#menu {
display: flex;
overflow: auto;
}
.item {
min-width: 50%;
}
<div id="content">
<div id="menu">
<div class='item' id="item0">0</div>
<div class='item' id="item1">1</div>
<div class='item' id="item2">2</div>
</div>
</div>
Нужно при клике на item0 прокрутить menu по горизонтали до item1. Примечание. item0, item1, item2 ... имеют ширину 50%. Тут рабочий пример (если можно конечно): jsfiddle.net/ydwvq1xt/ Уже сломал голову, никак не выходит. Помогите реализовать это с помощью jquery. |
stomaks,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#menu {
display: flex;
overflow: auto;
}
.item {
min-width: 50%;
}
#item2{
background-color: #32CD32;
}
#item1{
background-color: #0000CD;
}
#item0{
background-color: #FFFF00;
}
</style>
</head>
<body>
<div id="content">
<div id="menu">
<div class='item' id="item0" onclick="menu.scrollLeft = this.offsetWidth">click me</div>
<div class='item' id="item1">1</div>
<div class='item' id="item2">2</div>
</div>
</div>
</body>
</html>
|
Спасибо вам за ответ, но беда вот в чем, если вставить
onclick="menu.scrollLeft = this.offsetWidth" в item1, то он не прокрутит menu к item2, а прокрутить от начала на ширину элемента item1. Предполагается что количество item может быть разное, и с разной шириной. Надеюсь я доступно разъясняю, а то как-то запутано вышло) |
stomaks,
вы бы сформулировали что вам нужно более конкретно, а если блок последний то что по клику? |
Задача такая,
при клике на item0 прокрутить menu к item0, при нажатии не энтер когда item0 в фокусе прокрутить menu к item1 при клике на item1 прокрутить menu к item1, при нажатии не энтер когда item1 в фокусе прокрутить menu к item2 при клике на item2 прокрутить menu к item2, при нажатии не энтер когда item2 в фокусе прокрутить menu к item3 ... и тд. до последнего при клике на itemN (последний) прокрутить menu к itemN, при нажатии не энтер когда itemN в фокусе ничего не делать. Фокус условный, присвоение класса. С энтером я разберусь сам и с последним item тоже, мне лиш надо помочь с горизонтальным скроллом внутри menu, по очереди от первого до последнего, учитывая что ширина item не фиксированная, и количество item может быть разным. Спасибо. |
stomaks,
не осилил. |
горизонтальная прокрутка к следующему блоку по клику
stomaks,
возможно вы хотели так ...
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#menu {
display: flex;
overflow: auto;
}
.item {
min-width: 50%;
}
</style>
</head>
<body>
<div id="content">
<div id="menu">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
</div>
</div>
<script>
window.addEventListener('DOMContentLoaded', function() {
var menu = document.querySelector('#menu'),
node = menu.querySelectorAll('.item');
[].reduce.call(node, function(scrollLeft,item) {
var scroll = scrollLeft + item.offsetWidth;
item.addEventListener('click', function() {
menu.scrollLeft = menu.scrollLeft == scrollLeft ? scroll : scrollLeft
});
return scroll
},0);
});
</script>
</body>
</html>
|
Спасибо огромное, работает почти так как я задумал, остальное сам допилю.
Главное вы мне подкинули идею. |
| Часовой пояс GMT +3, время: 08:17. |