Форум

stomaks · #1 (**permalink**) 22.04.2016, 05:57

Мой код:

#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.

рони · #2 (**permalink**) 22.04.2016, 09:27

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>

stomaks · #3 (**permalink**) 22.04.2016, 21:41

Спасибо вам за ответ, но беда вот в чем, если вставить

onclick="menu.scrollLeft = this.offsetWidth"

в item1, то он не прокрутит menu к item2, а прокрутить от начала на ширину элемента item1.
Предполагается что количество item может быть разное, и с разной шириной.

Надеюсь я доступно разъясняю, а то как-то запутано вышло)

рони · #4 (**permalink**) 23.04.2016, 17:01

stomaks,
вы бы сформулировали что вам нужно более конкретно, а если блок последний то что по клику?

stomaks · #5 (**permalink**) 23.04.2016, 17:20

Задача такая,

при клике на 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 может быть разным.

Спасибо.

рони · #6 (**permalink**) 23.04.2016, 17:32

stomaks,
не осилил.

рони · #7 (**permalink**) 23.04.2016, 18:34

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>

stomaks · #8 (**permalink**) 23.04.2016, 20:19

Спасибо огромное, работает почти так как я задумал, остальное сам допилю.
Главное вы мне подкинули идею.

Форум

Справочник

Discord чат

Курсы javascript