如何使页面的侧边栏滚动显示的主体内容答案

【问题标题】：How can I make the sidebar of a page scroll out the main body content on display如何使页面的侧边栏滚动显示的主体内容
【发布时间】：2021-12-01 01:38:02
【问题描述】：

问题描述

我的问题是，我有一个侧边栏，它使用 -translate-x-2/3 定位在屏幕外 66% 处。所以它一直挂在那里，直到 onmouseover 事件将侧边栏拉出。一切都很好，但是，主体内容卡在了一个地方。在我看来，我拥有它们的 flex 类正在处理侧边栏内容，就好像它总是占用 x-3/12 的初始宽度，并且没有响应我随后将侧边栏翻译到屏幕外的事实。

背景图片

Unused Space

Sidebar Extended

代码

HTML

index.html

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="/css/style.css" rel="stylesheet">
</head>
<body>
    <div class="h-screen overflow-hidden flex items-center justify-center" style="background: #edf2f7;">
        <div class="flex flex-wrap bg-gray-100 w-full h-screen">
            <!-- Sidebar -->
            <div class="w-3/12 h-full bg-white rounded p-3 shadow-lg transform -translate-x-2/3 transition duration-500 ease-in-out"
                id="pid" onmouseover="displayShow()">
                <div class="flex items-center space-x-4 p-2 mb-5">
                    <img class="h-12 rounded-full"
                        src="http://www.gravatar.com/avatar/2acfb745ecf9d4dccb3364752d17f65f?s=260&amp;d=mp"
                        alt="James Bhatta">
                    <div>
                        <h4 class="font-semibold text-lg text-gray-700 capitalize font-poppins tracking-wide">James
                            Bhatta</h4>
                        <span class="text-sm tracking-wide flex items-center space-x-1">
                            <svg class="h-4 text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none"
                                viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z">
                                </path>
                            </svg>
                            <span class="text-gray-600">Verified</span>
                        </span>
                    </div>
                </div>
                <ul class="space-y-2 text-sm">
                    <li>
                        <a href="#"
                            class="flex items-center space-x-3 text-gray-700 p-2 rounded-md font-medium hover:bg-gray-200 bg-gray-200 focus:shadow-outline">
                            <span class="text-gray-600">
                                <svg class="h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                    stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z">
                                    </path>
                                </svg>
                            </span>
                            <span>Dashboard</span>
                        </a>
                    </li>
                    <li>
                        <a href="#"
                            class="flex items-center space-x-3 text-gray-700 p-2 rounded-md font-medium hover:bg-gray-200 focus:bg-gray-200 focus:shadow-outline">
                            <span class="text-gray-600">
                                <svg class="h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                    stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9">
                                    </path>
                                </svg>
                            </span>
                            <span>Notifications</span>
                        </a>
                    </li>
                    <li>
                        <a href="#"
                            class="flex items-center space-x-3 text-gray-700 p-2 rounded-md font-medium hover:bg-gray-200 focus:bg-gray-200 focus:shadow-outline">
                            <span class="text-gray-600">
                                <svg class="h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                    stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z">
                                    </path>
                                </svg>
                            </span>
                            <span>Personal messages</span>
                        </a>
                    </li>
                    <li>
                        <a href="#"
                            class="flex items-center space-x-3 text-gray-700 p-2 rounded-md font-medium hover:bg-gray-200 focus:bg-gray-200 focus:shadow-outline">
                            <span class="text-gray-600">
                                <svg class="h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                    stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                                </svg>
                            </span>
                            <span>My profile</span>
                        </a>
                    </li>
                    <li>
                        <a href="#"
                            class="flex items-center space-x-3 text-gray-700 p-2 rounded-md font-medium hover:bg-gray-200 focus:bg-gray-200 focus:shadow-outline">
                            <span class="text-gray-600">
                                <svg class="h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                    stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4">
                                    </path>
                                </svg>
                            </span>
                            <span>Settings</span>
                        </a>
                    </li>
                    <li>
                        <a href="#"
                            class="flex items-center space-x-3 text-gray-700 p-2 rounded-md font-medium hover:bg-gray-200 focus:bg-gray-200 focus:shadow-outline">
                            <span class="text-gray-600">
                                <svg class="h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                    stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z">
                                    </path>
                                </svg>
                            </span>
                            <span>Change password</span>
                        </a>
                    </li>
                    <li>
                        <a href="#"
                            class="flex items-center space-x-3 text-gray-700 p-2 rounded-md font-medium hover:bg-gray-200 focus:bg-gray-200 focus:shadow-outline">
                            <span class="text-gray-600">
                                <svg class="h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                    stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1">
                                    </path>
                                </svg>
                            </span>
                            <span>Logout</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="flex-grow" id="mainContent">
                <div class="p-4 text-gray-500">
                    Content here...
                    <div class="inline-flex">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        function displayHide() {
            document.getElementById("pid").classList.add("-translate-x-2/3");
        }
        function displayShow() {
            document.getElementById("pid").classList.remove("-translate-x-2/3");

        }
    </script>
</body>

【问题讨论】：

你想让你的页面内容在侧边栏打开和关闭时发生位移吗？
@Jarne Kompier 侧边栏开始关闭，我希望内容能够反映这一点。例如，当侧边栏关闭时，内容会使用未使用的空间。那么当侧边栏打开时，内容会被移位

标签： javascript html tailwind-css

【解决方案1】：

我设法解决了这个问题。

我的解决方案的描述。 稍微想了想，我最初想出的解决方案就是将侧边栏设置为绝对位置。这对我来说是让我从 x=0 -> x=MAX 获得整个页面宽度。然后，我使用 transform 和 translate 在侧边栏的同一时刻移动内容，从而在侧边栏展开时提供页面移动的良好效果。我还将翻译的内容实例化到隐藏侧边栏的确切位置。如果您查看我的屏幕截图，您会明白我的意思，当侧边栏被隐藏时，它仅扩展了 6.25%。所以我也翻译了内容+ 6.25％。这意味着 6.25% 的内容滚动到页面右侧，只是在实例化时，非常无响应。

我真的不喜欢这个解决方案。在某些用例中，它可以产生很好的效果，导致内容的整个右侧被滚动到视图之外。我想我将来可能会在某些情况下使用这种方法，它看起来不错，但如果您希望内容具有响应性，则不是。我打算使用导航栏，而必须设计一个始终使用 -6.25% 填充的导航栏真的让我很兴奋。

做出更具响应性的设计。我所做的是在绝对定位的侧边栏后面包含一个 div 类。这将使自己位于主要内容的前面，并且因为此 div 的父级是 flex，所以内容将完美地放在它的旁边。

            <div class="transition-width w-1/16 duration-700 ease-in-out md:bg-gray-200 md:shadow-2xl" id="behindSidebar"></div>
            <div class="flex-grow transform transition duration-500 ease-in-out" id="mainContent" onmouseover="displayHide()">

侧边栏悬停时调用displayShow()，悬停主要内容时调用displayHide()。

这是最初问题的所有工作解决方案的代码

Javascript

        function displayHide() {
            document.getElementById("sidebar").classList.add("md:-translate-x-3/4");
            document.getElementById("sidebar").classList.add("-translate-x-full");
            document.getElementById("behindSidebar").classList.remove("w-1/4");
            document.getElementById("behindSidebar").classList.add("w-1/16");
        }
        function displayShow() {
            document.getElementById("sidebar").classList.remove("-translate-x-full");
            document.getElementById("sidebar").classList.remove("md:-translate-x-3/4");
            document.getElementById("behindSidebar").classList.remove("w-1/16");
            document.getElementById("behindSidebar").classList.add("w-1/4");
        }

侧边栏

<!-- THIS DIV CLASS IS WHAT WAS CHANGED!!!!! -->
<div class="overflow-hidden absolute w-1/4 h-full bg-white rounded p-3 shadow-lg transform -translate-x-full md:-translate-x-3/4 transition duration-500 ease-in-out" id="sidebar" onmouseover="displayShow()">
<!-- NO OTHER CHANGES!!!!! -->
    <div class="flex items-center space-x-4 p-2 mb-5">
        <img class="h-12 rounded-full" src="http://www.gravatar.com/avatar/2acfb745ecf9d4dccb3364752d17f65f?s=260&amp;d=mp" alt="James Bhatta">
        <div>
            <h4 class="font-semibold text-lg text-gray-700 capitalize font-poppins tracking-wide">James Bhatta</h4>

内容

            <!-- This div sits behind the Sidebar, it has a longer delay to give a nice fade out effect -->
            <div class="transition-width w-1/16 duration-700 ease-in-out md:bg-gray-200 md:shadow-2xl" id="behindSidebar"></div>
            <!-- End -->
            <div class="flex-grow transform transition duration-500 ease-in-out" id="mainContent" onmouseover="displayHide()">
                <div class="p-4 text-gray-500">
                    Content here...a
                    <div class="inline-flex">
                    </div>
                </div>
            </div>

重要！ 如果您要实施此解决方案，请注意，使用 tailwindcss 您必须包括 tailwind.config.js

  theme: {
    extend: {
      "translate":
      {
        '1/16': '6.25%',
        '-1/16': '-6.25%',
      },
      width:
      {
        '1/16': '6.25%',
        '-1/16': '-6.25%',
      },
      transitionProperty:
      {
        'width': 'width'
      },
    },
  },

如果有人对更好的解决方案有更多的想法或意见，我会全力以赴，这是我想出的方式，因为主要内容有 flex-grow。由于调整 div 框的大小，它会根据页面上剩余的空间自动调整自己的大小。谢谢。

【讨论】：