Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 21.06.2014, 13:00
Интересующийся
Отправить личное сообщение для Bizon4ik Посмотреть профиль Найти все сообщения от Bizon4ik
 
Регистрация: 04.11.2013
Сообщений: 15

Как избежать полосы прокрутки при анимации
Доброе время суток.

Пытаюсь реализовать следующее: при нажатии на кнопку выезжает элемент с права на лево.
Выезд элемента сделан по следующей логике: при нажатии на кнопку меняю visability у нужного элемента (на visible) и дальше путем изменения его marginLeft cо 100% до 16% двигаю в лево;

Все работает хорошо, но есть как всегда одно но. При такой логике, в момент анимации на доли секунды появляется горизонтальная полоса прокрутки (видь в какой то момент у нас есть блок с marginLeft и соотвественно он не влазит в экран). Как это можно исправить или подскажите другую логику для анимации что бы все работало?

Заранее всем спасибо.

ПС: Запретить браузеру отображать полосу прокрутки не вариант.
Ответить с цитированием
  #2 (permalink)  
Старый 21.06.2014, 13:18
Аватар для Erolast
Профессор
Отправить личное сообщение для Erolast Посмотреть профиль Найти все сообщения от Erolast
 
Регистрация: 24.09.2013
Сообщений: 1,436

Проставь элементу display: relative и двигай через свойства left/right.
Ответить с цитированием
  #3 (permalink)  
Старый 21.06.2014, 13:33
Аватар для Erolast
Профессор
Отправить личное сообщение для Erolast Посмотреть профиль Найти все сообщения от Erolast
 
Регистрация: 24.09.2013
Сообщений: 1,436

При увеличении right элемент сдвинется влево, при уменьшении - вправо. При увеличении left элемент сдвинется вправо, при уменьшении - влево.

<!DOCTYPE HTML>
<html>
<head>
<script>
  var LEFT = 0;
  var RIGHT = 1;
  
  function push(elem, direction) {
    
    function add_to_offset(offset, number) {
      offset = offset || "0px";
      return (parseInt(offset.slice(0, -2)) + number) + "px"; 
    }
    
    var offset = direction == RIGHT ? 10 : -10;
    
    elem.style.left = (add_to_offset(elem.style.left, offset));
  };
</script>
</head>
<body>
<style>
#mydiv {
  position: relative;
  width: 10px;
  height: 10px;
  background-color: red;
}
</style>
<div id="mydiv"></div>
<button onclick="push(document.getElementById('mydiv'), LEFT)">Push left</button>
<button onclick="push(document.getElementById('mydiv'), RIGHT)">Push right</button>
</body>
</html>

Последний раз редактировалось Erolast, 21.06.2014 в 13:51.
Ответить с цитированием
  #4 (permalink)  
Старый 21.06.2014, 13:39
Аватар для MallSerg
Профессор
Отправить личное сообщение для MallSerg Посмотреть профиль Найти все сообщения от MallSerg
 
Регистрация: 07.03.2011
Сообщений: 1,127

Элемент с relative занимает место на странице это не всегда приемлемо
Ответить с цитированием
  #5 (permalink)  
Старый 21.06.2014, 13:51
Аватар для Erolast
Профессор
Отправить личное сообщение для Erolast Посмотреть профиль Найти все сообщения от Erolast
 
Регистрация: 24.09.2013
Сообщений: 1,436

Тогда все то же самое, только с position absolute.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Управление скроллом "а-ля тач" HonesT Элементы интерфейса 2 27.08.2013 14:25
При прокрутки скроллинга выделается текст в ie Nailya jQuery 8 15.06.2013 01:05
как сделать что бы при открытии страницы сразу открылось большое фото oksanaweb Общие вопросы Javascript 1 05.06.2013 02:17
Как при щелчке прибавить значение cookies на единицу. Peter23 Общие вопросы Javascript 6 23.02.2013 13:14
как нарисовать графические полосы? czp Общие вопросы Javascript 43 26.12.2011 15:33