Форум

DenKuzmin17 · #1 (**permalink**) 09.08.2019, 18:04

Здравствуйте, уважаемые.
Подскажите, почему заедает скролл вверх, после нажатия кнопки "Вниз"?

<head>
<style>
main, .scroll-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.scroll-btn {
  cursor: pointer;
}
.scroll-wrapper {
  width: 400px;
  height: 150px;
  margin-bottom: 5px;
  border: 1px solid #000;
  overflow: scroll;
}
.slide {
  width: 380px;
  height: 150px;
}
.one {
  background: red;
}
.two {
  background: green;
}
.three {
  background: yellow;
}
.four {
  background: blue;
}
.five {
  background: black;
}
.scroll-btn {
  width: 100px;
  height: 50px;
  border: 1px solid #000;
}
</style>
</head>
<body>
<main>
  <div class="scroll-wrapper">
    <div class="slide one"></div>
    <div class="slide two"></div>
    <div class="slide three"></div>
    <div class="slide four"></div>
    <div class="slide five"></div>
  </div>
  <div class="scroll-btn"><span>ВНИЗ</span></div>
</main>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script>
$('.scroll-btn').click(function () {
  var slideH = $('.slide').height();
  var slidesN = $('.slide').length;
  var scroll = slideH * slidesN;
  console.log(slideH);
  console.log(slidesN);
  
  $('.scroll-wrapper').animate({ scrollTop: 10000 }, 3000);
});
</script>
</body>

Ссылка на codepen: https://codepen.io/rootsuperuser/pen/rXZYJR

рони · #2 (**permalink**) 09.08.2019, 18:12

Сообщение от DenKuzmin17

Подскажите, почему заедает скролл вверх

потому что 3 секунды не прошло.

Сообщение от DenKuzmin17

1.8.3.js

используйте последние версии jquery

MC-XOBAHCK · #3 (**permalink**) 09.08.2019, 18:14

Я думаю потому что кнопка находится за пределами окна которое скролится.
Два клика по окну и скрол работает. Наверное при первом снимается фокус с кнопки, при втором - фокус устанавливается на окно.

laimas · #4 (**permalink**) 09.08.2019, 18:14

Потому, что не отработала анимация за указанное время.

$('.scroll-wrapper').stop().animate.....

DenKuzmin17 · #5 (**permalink**) 09.08.2019, 18:16

Сообщение от рони

потому что 3 секунды не прошло.

Подскажите, пожалуйста, как отменить текущую анимацию при скролле окна вверх?

рони · #6 (**permalink**) 09.08.2019, 18:26

DenKuzmin17,

<!DOCTYPE html>

<html>
<head>
<style>
main, .scroll-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.scroll-btn {
    cursor: pointer;
}
.scroll-wrapper {
    width: 400px;
    height: 150px;
    margin-bottom: 5px;
    border: 1px solid #000;
    overflow: scroll;
}
.slide {
    width: 380px;
    height: 150px;
}
.one {
    background: red;
}
.two {
    background: green;
}
.three {
    background: yellow;
}
.four {
    background: blue;
}
.five {
    background: black;
}
.scroll-btn {
    width: 100px;
    height: 50px;
    border: 1px solid #000;
}
</style>
</head>
<body>
<main>
    <div class="scroll-wrapper">
        <div class="slide one"></div>
        <div class="slide two"></div>
        <div class="slide three"></div>
        <div class="slide four"></div>
        <div class="slide five"></div>
    </div>
    <div class="scroll-btn"><span>ВНИЗ</span></div>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$('.scroll-btn').click(function () {
    var slideH = $('.slide').height();
    var slidesN = $('.slide').length;
    var scroll = slideH * slidesN;
    console.log(slideH);
    console.log(slidesN);
    $('.scroll-wrapper').animate({ scrollTop: 10000 }, 3000, function() {
});
})

$('.scroll-wrapper').on('wheel mousedown', function() {
   $(this).stop(true, false)
});
</script>
</body>

</html>

DenKuzmin17 · #7 (**permalink**) 09.08.2019, 18:53

Спасибо большое!

Форум

Справочник

Discord чат

Курсы javascript