Как избежать полосы прокрутки при анимации
Доброе время суток.
Пытаюсь реализовать следующее: при нажатии на кнопку выезжает элемент с права на лево. Выезд элемента сделан по следующей логике: при нажатии на кнопку меняю visability у нужного элемента (на visible) и дальше путем изменения его marginLeft cо 100% до 16% двигаю в лево; Все работает хорошо, но есть как всегда одно но. При такой логике, в момент анимации на доли секунды появляется горизонтальная полоса прокрутки (видь в какой то момент у нас есть блок с marginLeft и соотвественно он не влазит в экран). Как это можно исправить или подскажите другую логику для анимации что бы все работало? Заранее всем спасибо. ПС: Запретить браузеру отображать полосу прокрутки не вариант. |
Проставь элементу display: relative и двигай через свойства left/right.
|
При увеличении 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>
|
Элемент с relative занимает место на странице это не всегда приемлемо
|
Тогда все то же самое, только с position absolute.
|
| Часовой пояс GMT +3, время: 15:32. |