Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.08.2019, 18:04
Интересующийся
Отправить личное сообщение для DenKuzmin17 Посмотреть профиль Найти все сообщения от DenKuzmin17
 
Регистрация: 31.05.2019
Сообщений: 22

Почему заедает scroll?
Здравствуйте, уважаемые.
Подскажите, почему заедает скролл вверх, после нажатия кнопки "Вниз"?
<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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,518

Сообщение от DenKuzmin17
Подскажите, почему заедает скролл вверх
потому что 3 секунды не прошло.
Сообщение от DenKuzmin17
1.8.3.js
используйте последние версии jquery
Ответить с цитированием
  #3 (permalink)  
Старый 09.08.2019, 18:14
Аватар для MC-XOBAHCK
Профессор
Отправить личное сообщение для MC-XOBAHCK Посмотреть профиль Найти все сообщения от MC-XOBAHCK
 
Регистрация: 06.08.2017
Сообщений: 397

Я думаю потому что кнопка находится за пределами окна которое скролится.
Два клика по окну и скрол работает. Наверное при первом снимается фокус с кнопки, при втором - фокус устанавливается на окно.
Ответить с цитированием
  #4 (permalink)  
Старый 09.08.2019, 18:14
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 10,645

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

$('.scroll-wrapper').stop().animate.....
Ответить с цитированием
  #5 (permalink)  
Старый 09.08.2019, 18:16
Интересующийся
Отправить личное сообщение для DenKuzmin17 Посмотреть профиль Найти все сообщения от DenKuzmin17
 
Регистрация: 31.05.2019
Сообщений: 22

Сообщение от рони
потому что 3 секунды не прошло.
Подскажите, пожалуйста, как отменить текущую анимацию при скролле окна вверх?
Ответить с цитированием
  #6 (permalink)  
Старый 09.08.2019, 18:26
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,518

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>

Последний раз редактировалось рони, 09.08.2019 в 18:31.
Ответить с цитированием
  #7 (permalink)  
Старый 09.08.2019, 18:53
Интересующийся
Отправить личное сообщение для DenKuzmin17 Посмотреть профиль Найти все сообщения от DenKuzmin17
 
Регистрация: 31.05.2019
Сообщений: 22

Спасибо большое!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Регулярные выражения. Почему находи именно так? jsuse Общие вопросы Javascript 4 21.11.2011 14:37
Свойства объекта, методы и this. Почему свойство вызывается с () ? jsuse Общие вопросы Javascript 2 04.11.2011 18:39
Prototype. Одноблочное определение псевдокласса. Литеральная форма не робит. Почему? GuardCat Общие вопросы Javascript 6 03.10.2011 12:46
Почему offset().top не работает в ИЕ Afonin jQuery 2 08.07.2011 09:08
Почему это работает? (инклуд JS в JS) Василий Б. Общие вопросы Javascript 4 11.06.2010 11:41