如何使页面的侧边栏滚动出显示的主体内容
How can I make the sidebar of a page scroll out the main body content on display
问题描述
我的问题是，我有一个边栏，它使用 -translate-x-2/3 位于屏幕外 66%。所以它一直挂在那里，直到将侧边栏拉出的 onmouseover 事件。
都还好，就是主体内容卡在一处。在我看来，我拥有它们的 flex class 正在处理侧边栏内容，就好像它总是占用 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&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>
我设法解决了这个问题。
我的解决方案的描述。
在我稍微考虑之后，我最初想到的解决方案是将侧边栏设置为绝对位置。这为我所做的是允许我从 x=0 -> x=MAX 获取整个页面宽度。然后，我使用转换和翻译在与侧边栏完全相同的时刻移动内容，从而产生页面随着侧边栏展开而移动的良好效果。我还实例化了翻译到侧边栏被隐藏的确切位置的内容。如果您查看我的屏幕截图，您会明白我的意思，当侧边栏被隐藏时，它只扩展了 6.25%。所以我也翻译了内容+ 6.25%。这意味着 6.25% 的内容滚动到页面右侧，只是在实例化时，非常没有响应。
我真的不喜欢这个解决方案。在某些用例中，它可以提供很好的效果，导致内容的整个右侧被滚动到视图之外。我想我将来可能会在某些情况下使用这种方法，它看起来不错，但如果你想让内容响应的话就不行了。我计划使用导航栏，并且必须设计一个始终具有 -6.25% 填充的导航栏，这让我很不爽。
进行更具响应性的设计。我所做的是在绝对定位的侧边栏后面包含一个 div class。这将使自己位于主要内容的前面，并且由于此 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&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 框，它会根据页面上留下的 space 自动调整自身大小。
谢谢。
问题描述
我的问题是，我有一个边栏，它使用 -translate-x-2/3 位于屏幕外 66%。所以它一直挂在那里，直到将侧边栏拉出的 onmouseover 事件。 都还好，就是主体内容卡在一处。在我看来，我拥有它们的 flex class 正在处理侧边栏内容，就好像它总是占用 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&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>
我设法解决了这个问题。
我的解决方案的描述。 在我稍微考虑之后，我最初想到的解决方案是将侧边栏设置为绝对位置。这为我所做的是允许我从 x=0 -> x=MAX 获取整个页面宽度。然后，我使用转换和翻译在与侧边栏完全相同的时刻移动内容，从而产生页面随着侧边栏展开而移动的良好效果。我还实例化了翻译到侧边栏被隐藏的确切位置的内容。如果您查看我的屏幕截图，您会明白我的意思，当侧边栏被隐藏时，它只扩展了 6.25%。所以我也翻译了内容+ 6.25%。这意味着 6.25% 的内容滚动到页面右侧，只是在实例化时，非常没有响应。
我真的不喜欢这个解决方案。在某些用例中，它可以提供很好的效果，导致内容的整个右侧被滚动到视图之外。我想我将来可能会在某些情况下使用这种方法，它看起来不错，但如果你想让内容响应的话就不行了。我计划使用导航栏，并且必须设计一个始终具有 -6.25% 填充的导航栏，这让我很不爽。
进行更具响应性的设计。我所做的是在绝对定位的侧边栏后面包含一个 div class。这将使自己位于主要内容的前面，并且由于此 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&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 框，它会根据页面上留下的 space 自动调整自身大小。 谢谢。