0

У меня есть окошко, в котором активен scroll. Пока scroll на месте, всё чудесно, но если прокрутить вниз, то абсолютно позиционированный элемент начинает съезжать.

Вопрос: можно это как-то исправить средствами css либо подстройкой jquery? Уже много сделал, обёртывать еще в один контейнер не хотелось бы, много ивентов переделывать придётся. Меня устроят любые пути, кроме добавления новых элементов.

Как сделать так, чтоб мой список двигался вместе с прокруткой?

$('.content').on('click', function() {
  $(this).next().fadeToggle();
});
.scroll {
  background-color: #eee;
  max-height: 150px;
  overflow-y: auto;
  overflow-x: hidden;
}
p {
  margin: 0;
  padding: 5px;
  border-bottom: 1px solid cornflowerblue;
  cursor: pointer;
}
.hidden {
  display: none;
  position: absolute;
  margin: 0;
  background: green;
  color: #fff;
  width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<div>
  <div class="scroll">
    <p class="content">content1</p>
    <ul class=hidden>
      <li>line 1</li>
      <li>line 2</li>
      <li>line 3</li>
    </ul>
    <p class="content">content2</p>
    <ul class=hidden>
      <li>line 1</li>
      <li>line 2</li>
      <li>line 3</li>
    </ul>
    <p class="content">content3</p>
    <ul class=hidden>
      <li>line 1</li>
      <li>line 2</li>
      <li>line 3</li>
    </ul>
    <p class="content">content4</p>
    <ul class=hidden>
      <li>line 1</li>
      <li>line 2</li>
      <li>line 3</li>
    </ul>
    <p class="content">content5</p>
    <ul class=hidden>
      <li>line 1</li>
      <li>line 2</li>
      <li>line 3</li>
    </ul>
    <p class="content">content6</p>
    <ul class=hidden>
      <li>line 1</li>
      <li>line 2</li>
      <li>line 3</li>
    </ul>
    <p class="content">content7</p>
    <ul class=hidden>
      <li>line 1</li>
      <li>line 2</li>
      <li>line 3</li>
    </ul>
    <p class="content">content8</p>
    <ul class=hidden>
      <li>line 1</li>
      <li>line 2</li>
      <li>line 3</li>
    </ul>
    <p class="content">content9</p>
    <ul class=hidden>
      <li>line 1</li>
      <li>line 2</li>
      <li>line 3</li>
    </ul>
  </div>
</div>

1 ответ 1

0

Добавь для scroll position: relative;

$('.content').on('click', function() {
  $(this).next().fadeToggle();
});
.scroll {
  position: relative; /* Это! */
  background-color: #eee;
  max-height: 150px;
  overflow-y: auto;
  overflow-x: hidden;
}
p {
  margin: 0;
  padding: 5px;
  border-bottom: 1px solid cornflowerblue;
  cursor: pointer;
}
.hidden {
  display: none;
  position: absolute;
  margin: 0;
  background: green;
  color: #fff;
  width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<div>
  <div class="scroll">
    <p class="content">content1</p>
    <ul class=hidden>
      <li>line 1</li>
      <li>line 2</li>
      <li>line 3</li>
    </ul>
    <p class="content">content2</p>
    <ul class=hidden>
      <li>line 1</li>
      <li>line 2</li>
      <li>line 3</li>
    </ul>
    <p class="content">content3</p>
    <ul class=hidden>
      <li>line 1</li>
      <li>line 2</li>
      <li>line 3</li>
    </ul>
    <p class="content">content4</p>
    <ul class=hidden>
      <li>line 1</li>
      <li>line 2</li>
      <li>line 3</li>
    </ul>
    <p class="content">content5</p>
    <ul class=hidden>
      <li>line 1</li>
      <li>line 2</li>
      <li>line 3</li>
    </ul>
    <p class="content">content6</p>
    <ul class=hidden>
      <li>line 1</li>
      <li>line 2</li>
      <li>line 3</li>
    </ul>
    <p class="content">content7</p>
    <ul class=hidden>
      <li>line 1</li>
      <li>line 2</li>
      <li>line 3</li>
    </ul>
    <p class="content">content8</p>
    <ul class=hidden>
      <li>line 1</li>
      <li>line 2</li>
      <li>line 3</li>
    </ul>
    <p class="content">content9</p>
    <ul class=hidden>
      <li>line 1</li>
      <li>line 2</li>
      <li>line 3</li>
    </ul>
  </div>
</div>

Суть в том, что у вас высота считалась от самого окна. Когда я добавил position: relative, то высота начала считаться от элемента .scroll

2
  • я так делал, и меня это не устраивает, потому что при нажатии на нижнюю строку, список прячется, а мне нужно, чтоб он был всегда виден
    – ke1evra
    11 фев 2017 в 19:28
  • @ke1evra, по другому только скриптово, как-то. И то, тогда не будет скрываться, если вверх листать
    – Yuri
    11 фев 2017 в 19:33

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.