如何使页面的侧边栏滚动出显示的主体内容
如何使页面的侧边栏滚动出显示的主体内容
提问于 2021-10-12 12:47:49
问题描述
我的问题是，我有一个侧边栏，它位于66%的屏幕外使用-翻译-x-2/3。所以它挂在那里，直到onmouseover事件拉出侧边栏。一切都是好的，那就是主体内容卡在一个地方。在我看来，我所使用的flex类将侧边栏内容视为总是占用x-3/12的初始宽度，而不是响应我当时正在将侧边栏翻译到屏幕外的事实。
用于上下文的图像
码
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>回答 1
Stack Overflow用户
回答已采纳
发布于 2021-10-12 19:05:19
我设法解决了这个问题。
对我的解决方案的描述。在我稍微考虑一下之后，我最初想出的解决方案是将侧边栏设置为一个绝对位置。对我来说，这是允许我从x=0 -> x=MAX获得整个页面宽度的。然后，我使用transform和transform在与侧边栏完全相同的时刻移动内容，给出了页面在边栏扩展时移动的良好效果。我还实例化了翻译到侧栏隐藏的确切位置的内容。如果你看我的截图，你可以看到我的意思，当侧边栏是隐藏的，它只扩展了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&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>如果要实现此解决方案，请注意，使用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'
},
},
},如果有人对更好的解决方案有更多的想法或评论，我都会听，这就是我想出的方式，因为主要内容都是弹性增长的。由于调整div框的大小，它会根据页面上留下的空间自动调整大小。谢谢。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69540838
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号