使用transformX内容溢出到页面边界之外

Question

我有一个简单的项目。在该项目中，我有一个与 translateX 配合使用的抽屉。我的问题是，当我打开那个抽屉时，我的主要内容就超出了页面。

这个问题就在这两张图里体现出来了

我希望抽屉打开时内容不会超出页面，但我不知道处理此问题的最佳方法。

代码如下

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .container {
            max-width: 1200px;
            margin: auto;
            padding: 0 10px;
        }

        .header {
            display: flex;
            justify-content: space-between;
            padding: 20px;
            border-bottom: 1px solid lightcoral;
        }

        .hamburger {
            cursor: pointer;
        }

        .contents {
            display: flex;
            gap: 10px;
        }

        .drawerContainer {
            position: relative;
        }

        .drawer {
            position: absolute;
            background-color: lightcoral;
            transform: translateX(-100%);
            transition: all 0.2s ease-in-out;
            padding: 20px;
            width: 320px;
        }

        .drawer.open {
            transform: translateX(0);
        }

        .content {
            transition: all 0.2s ease-in-out;
        }

        .transformContent {
            transform: translateX(320px);
        }
    </style>
</head>
<body>
<header class="header">
    <div class="hamburger">
        Hamburger Menu
    </div>
    <div>
        Other content
    </div>
</header>
<div class="contents">
    <div class="drawerContainer">
        <div class="drawer">
            This is Drawer
        </div>
    </div>
    <div class="container">
        <div class="content">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, cupiditate dignissimos ducimus, fuga harum
            ipsum
            maiores mollitia nihil perspiciatis placeat quod reiciendis repellendus rerum saepe sint tenetur voluptate?
            Ab
            accusantium architecto asperiores beatae, consequatur delectus deleniti dignissimos dolorem doloribus
            dolorum,
            ea earum eius enim expedita facere illo, incidunt ipsa ipsam itaque minima molestias natus non perferendis
            placeat praesentium provident quam recusandae repudiandae sapiente similique vel velit voluptates
            voluptatum?
            Architecto atque consequatur distinctio, dolorem eveniet, harum in incidunt labore maiores minus natus nobis
            odio perferendis quis repellat suscipit totam? A asperiores consequatur cumque dicta dignissimos doloribus
            est
            ex facilis ipsa iste labore laborum maiores maxime minus molestias nam natus nobis obcaecati pariatur
            quibusdam
            quo sequi tempora tenetur ullam ut vero, voluptatem! A aliquam aspernatur aut cumque distinctio, doloribus
            inventore laborum natus nesciunt perspiciatis quam soluta tenetur unde vero voluptates. Aliquid animi
            architecto
            asperiores atque, cum, cupiditate deleniti doloribus eaque esse et excepturi, expedita labore magni maxime
            minus
            mollitia nam nemo nobis odit officia officiis pariatur porro praesentium quaerat quia quos rem reprehenderit
            repudiandae sequi sint suscipit temporibus tenetur voluptate! Accusamus architecto at, atque autem culpa
            cupiditate debitis dolorem dolorum inventore ipsam modi nihil perspiciatis, porro quis repudiandae!
            Accusantium
            amet asperiores assumenda autem blanditiis corporis culpa, cum dolorem ducimus eligendi ipsum labore magnam
            maxime nam pariatur provident quam quidem reprehenderit rerum sapiente, sed suscipit unde, vel voluptatibus
            voluptatum! Cum cumque doloremque, dolorum fugit illo labore minima nam, perferendis possimus praesentium
            quasi,
            quos sequi voluptates? Aspernatur autem, ea expedita itaque iusto, laudantium mollitia porro provident quam
            recusandae rerum sequi! Ad aperiam doloribus error nostrum quas quisquam sunt temporibus totam voluptas
            voluptatem! Ad adipisci atque beatae, deserunt, ducimus eligendi enim eos ex fugit hic ipsa ipsum itaque
            iure
            laboriosam magnam maiores maxime modi numquam perspiciatis quam qui, quia quidem quis quisquam quo rem
            reprehenderit sunt suscipit tempore vel velit veniam veritatis voluptates! Ab ad corporis, eos, eveniet fuga
            id
            maiores molestiae quaerat quam quisquam, quo repellat temporibus voluptas! A accusantium amet aspernatur
            atque
            consectetur culpa cupiditate, debitis doloremque eius esse et expedita fugit id in ipsa iste iure magnam
            maxime
            odio praesentium quam quis quos ratione recusandae repellat tenetur unde? Dolor eos est eveniet in libero
            magni
            minus molestiae, odio quasi quos sint vel vero voluptas? A accusantium adipisci amet aperiam, aut cum
            cupiditate
            debitis dolore doloribus eaque exercitationem, facilis fuga hic id illo impedit incidunt labore modi neque
            nesciunt nulla officiis perspiciatis sapiente similique tenetur totam ullam vel. Debitis dolore explicabo
            officiis qui. Aliquam architecto assumenda at aut blanditiis consectetur cum dicta enim et eum eveniet
            fugiat
            fugit inventore itaque laudantium magnam necessitatibus nesciunt nisi nostrum odio perferendis quae quaerat
            quidem ratione, rem sint vero voluptates! Accusamus consectetur et facere, libero nihil perferendis
            praesentium
            quasi tempora. Alias illo inventore libero perspiciatis. Aliquid amet, animi assumenda debitis distinctio
            dolorem laboriosam nobis officia quas ut. Ab accusantium ad beatae culpa cumque delectus dicta distinctio
            dolore
            ducimus eaque eius eos fuga illo iure labore molestiae molestias, nisi non nostrum placeat porro praesentium
            quasi quisquam reprehenderit sapiente suscipit ut veniam veritatis, vitae voluptatum. Ab aliquid amet aut
            blanditiis consequuntur deleniti dolor dolores dolorum eos in incidunt ipsam molestias mollitia nostrum
            nulla
            numquam obcaecati perferendis placeat quis quos recusandae repellat soluta suscipit vero vitae voluptatem,
            voluptatibus? Ab aspernatur consectetur facere in quos. Laboriosam libero nam nesciunt odio. Beatae
            consequatur
            deserunt distinctio enim est, et harum laudantium maxime nesciunt nobis odit optio reiciendis sed ut, vel!
            Adipisci amet asperiores assumenda cupiditate dignissimos, ex facilis id libero magnam maxime mollitia optio
            quam, suscipit tempore voluptatem? Cupiditate, eius fuga fugiat, ipsam iusto, maiores neque officia
            perferendis
            provident quaerat quod totam voluptate. Dicta, est rem. Accusantium, asperiores consequuntur delectus, eaque
            est
            eveniet hic iste labore nesciunt nihil non nulla obcaecati odio officiis perspiciatis placeat possimus
            provident, quia reprehenderit rerum sed ullam veniam? Accusantium beatae consectetur culpa dolorem, eos est
            eveniet facere facilis fuga fugiat illo molestias nemo nihil obcaecati odit placeat, quaerat quasi quia
            ratione
            tempora ullam velit voluptates. A aspernatur delectus deleniti dolore doloremque dolorum eos excepturi
            explicabo, illo iste laudantium libero molestias nemo nesciunt, odio pariatur quam quo rem totam voluptates.
            Alias aspernatur atque debitis dicta dolores dolorum earum error esse eveniet in iure magni modi molestiae
            nam
            numquam, officiis pariatur possimus quam quia quod, recusandae rem reprehenderit suscipit tenetur totam? A
            adipisci, at culpa cupiditate dolore doloribus error explicabo illo iusto laboriosam magni natus neque nisi
            praesentium provident quaerat rerum sapiente, temporibus ullam ut vel vitae voluptas voluptate. Aperiam
            architecto commodi debitis delectus facere illum libero nesciunt nihil, nulla numquam optio perferendis
            porro
            quasi quidem quo rerum ullam. Accusantium animi aperiam commodi consequatur deserunt dolorem explicabo,
            incidunt
            labore nemo nobis officiis perspiciatis quo repellat rerum velit. Aliquid amet animi blanditiis consequuntur
            culpa cum delectus deleniti dignissimos dolore doloribus earum eligendi eum, ex expedita explicabo illo
            impedit
            laborum magni maiores molestias nihil nostrum omnis quae quam quia quidem quisquam ratione reiciendis rem
            reprehenderit saepe, sapiente sunt velit vero, voluptas voluptatem voluptatum. A architecto cumque enim,
            error
            impedit reiciendis sapiente suscipit voluptatum. Aliquid dolore eius ex laudantium mollitia nihil optio,
            praesentium quos sapiente tempora tempore ullam! Accusamus animi dicta dolor dolorem dolorum ea facilis
            fugiat
            harum in ipsa ipsum libero magnam minima molestiae mollitia natus odit officiis quasi quia quod recusandae,
            rem
            sit tenetur vitae voluptatibus. Ad consectetur cum ducimus exercitationem nulla obcaecati pariatur rerum
            sapiente? Expedita fugiat fugit ipsum maiores maxime nobis sequi vero? Beatae et nesciunt odit sapiente
            ullam!
            Aliquam excepturi molestiae officiis reiciendis! Adipisci, architecto atque deleniti, eaque, eum ex
            excepturi
            facilis fugiat harum illum ipsum possimus quisquam sed velit voluptatem? Dolores nesciunt odit omnis quasi.
            Aliquam blanditiis cumque debitis delectus eaque error esse facere ipsum, iste laboriosam libero minima
            minus
            modi molestias necessitatibus nihil nisi nobis nulla odio officiis placeat praesentium quibusdam
            reprehenderit
            saepe sed, ut vitae voluptas! Animi asperiores aspernatur blanditiis consequatur corporis cupiditate dicta
            dolore dolorem doloremque doloribus eius, enim exercitationem explicabo fuga hic iusto labore molestiae
            mollitia
            nam neque nostrum nulla perspiciatis quas quasi quia, sed sequi similique tenetur vero, voluptates! Ducimus,
            praesentium sit!
        </div>
    </div>
</div>
</body>

<script>
    const menuButton = document.querySelector('.hamburger');
    const drawer = document.querySelector('.drawer');
    const mainContent = document.querySelector('.content');

    menuButton.addEventListener('click', () => {
        drawer.classList.toggle('open');

        if (drawer.classList.contains('open')) {
            mainContent.classList.add('transformContent');
        } else {
            mainContent.classList.remove('transformContent');
        }
    });

</script>
</html>

Answer 1

内容的宽度导致其溢出。从内容宽度中减去汉堡菜单的宽度将消除正文的溢出。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .container {
            max-width: 1200px;
            margin: auto;
            padding: 0 10px;
        }

        .header {
            display: flex;
            justify-content: space-between;
            padding: 20px;
            border-bottom: 1px solid lightcoral;
        }

        .hamburger {
            cursor: pointer;
        }

        .contents {
            display: flex;
            gap: 10px;
        }

        .drawerContainer {
            position: relative;
        }

        .drawer {
            position: absolute;
            background-color: lightcoral;
            transform: translateX(-100%);
            transition: all 0.2s ease-in-out;
            padding: 20px;
            width: 320px;
        }

        .drawer.open {
            transform: translateX(0);
        }

        .content {
            transition: all 0.2s ease-in-out;
        }

        .transformContent {
            transform: translateX(320px);
            width: calc(100% - 320px);
        }
    </style>
</head>
<body>
<header class="header">
    <div class="hamburger">
        Hamburger Menu
    </div>
    <div>
        Other content
    </div>
</header>
<div class="contents">
    <div class="drawerContainer">
        <div class="drawer">
            This is Drawer
        </div>
    </div>
    <div class="container">
        <div class="content">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, cupiditate dignissimos ducimus, fuga harum
            ipsum
            maiores mollitia nihil perspiciatis placeat quod reiciendis repellendus rerum saepe sint tenetur voluptate?
            Ab
            accusantium architecto asperiores beatae, consequatur delectus deleniti dignissimos dolorem doloribus
            dolorum,
            ea earum eius enim expedita facere illo, incidunt ipsa ipsam itaque minima molestias natus non perferendis
            placeat praesentium provident quam recusandae repudiandae sapiente similique vel velit voluptates
            voluptatum?
            Architecto atque consequatur distinctio, dolorem eveniet, harum in incidunt labore maiores minus natus nobis
            odio perferendis quis repellat suscipit totam? A asperiores consequatur cumque dicta dignissimos doloribus
            est
            ex facilis ipsa iste labore laborum maiores maxime minus molestias nam natus nobis obcaecati pariatur
            quibusdam
            quo sequi tempora tenetur ullam ut vero, voluptatem! A aliquam aspernatur aut cumque distinctio, doloribus
            inventore laborum natus nesciunt perspiciatis quam soluta tenetur unde vero voluptates. Aliquid animi
            architecto
            asperiores atque, cum, cupiditate deleniti doloribus eaque esse et excepturi, expedita labore magni maxime
            minus
            mollitia nam nemo nobis odit officia officiis pariatur porro praesentium quaerat quia quos rem reprehenderit
            repudiandae sequi sint suscipit temporibus tenetur voluptate! Accusamus architecto at, atque autem culpa
            cupiditate debitis dolorem dolorum inventore ipsam modi nihil perspiciatis, porro quis repudiandae!
            Accusantium
            amet asperiores assumenda autem blanditiis corporis culpa, cum dolorem ducimus eligendi ipsum labore magnam
            maxime nam pariatur provident quam quidem reprehenderit rerum sapiente, sed suscipit unde, vel voluptatibus
            voluptatum! Cum cumque doloremque, dolorum fugit illo labore minima nam, perferendis possimus praesentium
            quasi,
            quos sequi voluptates? Aspernatur autem, ea expedita itaque iusto, laudantium mollitia porro provident quam
            recusandae rerum sequi! Ad aperiam doloribus error nostrum quas quisquam sunt temporibus totam voluptas
            voluptatem! Ad adipisci atque beatae, deserunt, ducimus eligendi enim eos ex fugit hic ipsa ipsum itaque
            iure
            laboriosam magnam maiores maxime modi numquam perspiciatis quam qui, quia quidem quis quisquam quo rem
            reprehenderit sunt suscipit tempore vel velit veniam veritatis voluptates! Ab ad corporis, eos, eveniet fuga
            id
            maiores molestiae quaerat quam quisquam, quo repellat temporibus voluptas! A accusantium amet aspernatur
            atque
            consectetur culpa cupiditate, debitis doloremque eius esse et expedita fugit id in ipsa iste iure magnam
            maxime
            odio praesentium quam quis quos ratione recusandae repellat tenetur unde? Dolor eos est eveniet in libero
            magni
            minus molestiae, odio quasi quos sint vel vero voluptas? A accusantium adipisci amet aperiam, aut cum
            cupiditate
            debitis dolore doloribus eaque exercitationem, facilis fuga hic id illo impedit incidunt labore modi neque
            nesciunt nulla officiis perspiciatis sapiente similique tenetur totam ullam vel. Debitis dolore explicabo
            officiis qui. Aliquam architecto assumenda at aut blanditiis consectetur cum dicta enim et eum eveniet
            fugiat
            fugit inventore itaque laudantium magnam necessitatibus nesciunt nisi nostrum odio perferendis quae quaerat
            quidem ratione, rem sint vero voluptates! Accusamus consectetur et facere, libero nihil perferendis
            praesentium
            quasi tempora. Alias illo inventore libero perspiciatis. Aliquid amet, animi assumenda debitis distinctio
            dolorem laboriosam nobis officia quas ut. Ab accusantium ad beatae culpa cumque delectus dicta distinctio
            dolore
            ducimus eaque eius eos fuga illo iure labore molestiae molestias, nisi non nostrum placeat porro praesentium
            quasi quisquam reprehenderit sapiente suscipit ut veniam veritatis, vitae voluptatum. Ab aliquid amet aut
            blanditiis consequuntur deleniti dolor dolores dolorum eos in incidunt ipsam molestias mollitia nostrum
            nulla
            numquam obcaecati perferendis placeat quis quos recusandae repellat soluta suscipit vero vitae voluptatem,
            voluptatibus? Ab aspernatur consectetur facere in quos. Laboriosam libero nam nesciunt odio. Beatae
            consequatur
            deserunt distinctio enim est, et harum laudantium maxime nesciunt nobis odit optio reiciendis sed ut, vel!
            Adipisci amet asperiores assumenda cupiditate dignissimos, ex facilis id libero magnam maxime mollitia optio
            quam, suscipit tempore voluptatem? Cupiditate, eius fuga fugiat, ipsam iusto, maiores neque officia
            perferendis
            provident quaerat quod totam voluptate. Dicta, est rem. Accusantium, asperiores consequuntur delectus, eaque
            est
            eveniet hic iste labore nesciunt nihil non nulla obcaecati odio officiis perspiciatis placeat possimus
            provident, quia reprehenderit rerum sed ullam veniam? Accusantium beatae consectetur culpa dolorem, eos est
            eveniet facere facilis fuga fugiat illo molestias nemo nihil obcaecati odit placeat, quaerat quasi quia
            ratione
            tempora ullam velit voluptates. A aspernatur delectus deleniti dolore doloremque dolorum eos excepturi
            explicabo, illo iste laudantium libero molestias nemo nesciunt, odio pariatur quam quo rem totam voluptates.
            Alias aspernatur atque debitis dicta dolores dolorum earum error esse eveniet in iure magni modi molestiae
            nam
            numquam, officiis pariatur possimus quam quia quod, recusandae rem reprehenderit suscipit tenetur totam? A
            adipisci, at culpa cupiditate dolore doloribus error explicabo illo iusto laboriosam magni natus neque nisi
            praesentium provident quaerat rerum sapiente, temporibus ullam ut vel vitae voluptas voluptate. Aperiam
            architecto commodi debitis delectus facere illum libero nesciunt nihil, nulla numquam optio perferendis
            porro
            quasi quidem quo rerum ullam. Accusantium animi aperiam commodi consequatur deserunt dolorem explicabo,
            incidunt
            labore nemo nobis officiis perspiciatis quo repellat rerum velit. Aliquid amet animi blanditiis consequuntur
            culpa cum delectus deleniti dignissimos dolore doloribus earum eligendi eum, ex expedita explicabo illo
            impedit
            laborum magni maiores molestias nihil nostrum omnis quae quam quia quidem quisquam ratione reiciendis rem
            reprehenderit saepe, sapiente sunt velit vero, voluptas voluptatem voluptatum. A architecto cumque enim,
            error
            impedit reiciendis sapiente suscipit voluptatum. Aliquid dolore eius ex laudantium mollitia nihil optio,
            praesentium quos sapiente tempora tempore ullam! Accusamus animi dicta dolor dolorem dolorum ea facilis
            fugiat
            harum in ipsa ipsum libero magnam minima molestiae mollitia natus odit officiis quasi quia quod recusandae,
            rem
            sit tenetur vitae voluptatibus. Ad consectetur cum ducimus exercitationem nulla obcaecati pariatur rerum
            sapiente? Expedita fugiat fugit ipsum maiores maxime nobis sequi vero? Beatae et nesciunt odit sapiente
            ullam!
            Aliquam excepturi molestiae officiis reiciendis! Adipisci, architecto atque deleniti, eaque, eum ex
            excepturi
            facilis fugiat harum illum ipsum possimus quisquam sed velit voluptatem? Dolores nesciunt odit omnis quasi.
            Aliquam blanditiis cumque debitis delectus eaque error esse facere ipsum, iste laboriosam libero minima
            minus
            modi molestias necessitatibus nihil nisi nobis nulla odio officiis placeat praesentium quibusdam
            reprehenderit
            saepe sed, ut vitae voluptas! Animi asperiores aspernatur blanditiis consequatur corporis cupiditate dicta
            dolore dolorem doloremque doloribus eius, enim exercitationem explicabo fuga hic iusto labore molestiae
            mollitia
            nam neque nostrum nulla perspiciatis quas quasi quia, sed sequi similique tenetur vero, voluptates! Ducimus,
            praesentium sit!
        </div>
    </div>
</div>
</body>

<script>
    const menuButton = document.querySelector('.hamburger');
    const drawer = document.querySelector('.drawer');
    const mainContent = document.querySelector('.content');

    menuButton.addEventListener('click', () => {
        drawer.classList.toggle('open');

        if (drawer.classList.contains('open')) {
            mainContent.classList.add('transformContent');
        } else {
            mainContent.classList.remove('transformContent');
        }
    });

</script>
</html>

使用transformX内容溢出到页面边界之外

问题描述投票：0回答：1

1个回答

最新问题

使用transformX内容溢出到页面边界之外

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1