Лучший способ сделать эту панель со скольжением?

Question

Я создал слайд-входе в/из окна, и я думаю, что есть более умный способ сделать это. Проблема, с которой я сталкиваюсь, заключается в том, что она бросает вертикальную полосу прокрутки на тело, когда появляется окно. Это, очевидно, ожидается, но, если не считать переполнения: скрытого на теле, как я могу сделать это более чисто?

FIDDLE: https://jsfiddle.net/43dog4fw/

// show logout box  
$('.user').click(function() { 
    $('.logout-box') 
     .show() 
     .animate({ 
      marginBottom: "0" 
     }, 200, 'swing'); 
}); 

// Close logout box 
$('.close-bar').click(function() { 
    $('.logout-box').animate({ 
     marginBottom: "-=380px" 
    }, 200, 'swing', function() { 
     $('.logout-box').hide(); 
    }); 
}); 

Answer 1

Вместо того, чтобы анимировать нижний край, нижний анимировать свойство в процентах. Таким образом, высота модальности не имеет значения.

JS

$('.user').click(function() { 
    $('.logout-box') 
     .show() 
     .animate({ 
      bottom: "0%" 
     }, 200, 'swing'); 
}); 

// Close logout box 
$('.close-bar').click(function() { 
    $('.logout-box').animate({ 
     bottom: "-100%" 
    }, 200, 'swing', function() { 
     $('.logout-box').hide(); 
    }); 
}); 

CSS

.logout-box { 
    position: fixed; 
    background: gray; 
    display: none; 
    left: 0; 
    bottom: -100%; 
    height: 380px; 
    margin-bottom: 0; 
    width: 100%; 
    background: #000000; 
} 

Если ваш модальный всегда приходит вверх от нижней части экрана, вы можете изменить положение к fixed вместо absolute, это также получает избавиться от полосы прокрутки.

Example Fiddle

Answer 2

Использование высоты вместо края анимировать.

// show logout box 
$('.user').click(function() { 
    $('.logout-box') 
    .show() 
    .animate({ 
    height: "380px" 
    }, 200, 'swing'); 
}); 
// Close logout box 
$('.close-bar').click(function() { 
    $('.logout-box').animate({ 
    height: 0 
    }, 200, 'swing', function() { 
    $('.logout-box').hide(); 
    }); 
}); 

DEMO

Answer 3

Вы можете использовать CSS transition и переключать .visible класс вроде этого:

Проверьте Fiddle

body { overflow:hidden } 
.logout-box { 
    position: absolute; 
    background: gray; 
    left: 0; 
    bottom: 0; 
    height: 380px; 
    margin-bottom: -380px; 
    width: 100%; 
    background: #000000; 
    opacity:0; 
    transition:all 150ms ease-in-out; 
} 

.visible { 
    margin-bottom:0; 
    opacity:1; 
}