I have a simple example that works almost as I want it with jQuery’s slideToggle, but since that method changes the height of the element it has the undesired consequence of changing the element’s rendering as it slides in/out. I’d rather have a “true” slide in/out, where the whole element is translated, with a “frozen” content. In particular, in this example I see that the vertical scrollbar disappears while the block is sliding in/out.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
#block {
position: fixed;
bottom: 0;
max-width: 30em;
max-height: 8em;
border: solid 1px;
overflow: auto;
}
</style>
</head>
<body>
<button id="but">Click</button>
<div id="block">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut porta tempor purus. Vivamus fermentum dolor mauris, et luctus elit congue quis. Maecenas lobortis pharetra posuere. Donec a odio odio. Mauris at faucibus elit. Vestibulum porta nibh diam, at finibus ante auctor sit amet. Duis et vulputate purus. Curabitur ante ipsum, eleifend nec augue sit amet, varius condimentum mauris. Pellentesque non ante in nisl pellentesque mattis. Sed lorem arcu, malesuada eu risus vel, iaculis aliquet orci.</p>
<p>Ut ac dictum sapien. In hac habitasse platea dictumst. Ut vitae placerat ipsum. Mauris tellus enim, tincidunt id ultrices sit amet, hendrerit at tortor. Vivamus porttitor arcu vel felis eleifend blandit. Suspendisse a vehicula purus. Maecenas condimentum massa nec metus euismod blandit. Suspendisse hendrerit et dui id bibendum. Mauris efficitur nunc tempus, tincidunt lorem ac, lacinia nisl. Fusce sagittis dui ut ornare suscipit. Aliquam cursus eros quis felis pulvinar lobortis. Proin eu est id odio lobortis fringilla. Ut ac auctor sem. Cras eget turpis lectus. Morbi volutpat justo magna, at tempus nisi vulputate ac.</p>
<p>Cras eget nulla semper, tincidunt turpis in, congue augue. Duis fringilla ac ante malesuada egestas. Fusce commodo lacinia ex non volutpat. Donec ac arcu quis risus eleifend dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce euismod eget felis feugiat blandit. Vestibulum suscipit nulla in ligula iaculis, eget fermentum enim tincidunt. Nunc eget dui lacus. Curabitur et odio finibus, auctor neque non, sagittis velit. Etiam faucibus justo eget est luctus vehicula.</p>
</div>
<script>
$('#but').click( function() {
$('#block').slideToggle(2000);
});
</script>
</body>
</html>Is it possible to get the same effect but with static content inside the sliding element?