Question

我有一个CSS网格布局，你可以看到：

＆＃13;

        $( ".sidebar-toggle" ).click(function() {
            $(".page-with-sidebar").toggleClass("collapsed");
        });

＆＃13;

.page-with-sidebar {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-areas: "sidebar content";
}

.page-with-sidebar.collapsed {
  grid-template-columns: 48px 1fr;
}

.ff-sidebar-container {
  grid-area: sidebar;
}

.ff-sidebar {
  position: fixed;
  width: 240px;
  height: 100vh;
  top: 0;
  left: 0;
  grid-area: sidebar;
  background-color: powderblue;

  <!-- THIS IS THE PROBLEM LINE ======================= -->
  overflow-y: scroll;
}

.page-with-sidebar.collapsed .ff-sidebar {
  width: 48px;
}

#sidebar-logo {
  width: 240px;
  height: 80px;
}

#sidebar-logo #logo-big {
  width: 48px;
  height: 48px;
  padding: 12px;
  margin: 0 0 32px 0;
}

#sidebar-logo #logo-small {
  width: 48px;
  height: 48px;
  padding: 12px;
  margin: 0 0 32px 0;
}

#sidebar-logo #logo-small {
  display: block;
}

#sidebar-logo #logo-small {
  display: none;
}

.page-with-sidebar.collapsed #sidebar-logo #logo-small {
  display: block;
}

.page-with-sidebar.collapsed #sidebar-logo #logo-big {
  display: none;
}

.sidebar-link {
  display: grid;
  position: relative;
  grid-template: 48px / 48px 192px;
  grid-template-areas: "icon label";
  align-items: center;
}

.sidebar-link span {
  width: 48px;
  height: 48px;
  padding: 16px;
  line-height: 1;
  align-self: center;
  justify-self: center;
}

.sidebar-link label {
  align-self: center;
  padding: 12px 0;
  font-size: 14px;
  font-weight: normal;
  color: black;
  cursor: pointer;
}

.sidebar-links summary {
  position: relative;
}

.sidebar-links summary::after {
  display: inline-block;
  position: absolute;
  width: 10px;
  height: 10px;
  top: 16px;
  right: 16px;
  content: "";
  padding: 2px;
  border-style: solid;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  color: black;
  transition: all 0.2s;
  cursor: pointer;
}

.sidebar-links details[open] summary::after {
  transform: rotate(225deg);
  top: 22px;
}

.page-with-sidebar.collapsed summary::after,
.page-with-sidebar.collapsed .sidebar-link label {
  display: none;
}

.page-with-sidebar.collapsed .sidebar-link:hover > label {
  display: inline-block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 40px;
  font-size: 16px;
  color: white;
  font-weight: normal;
  background-color: red;
  padding: 2px 8px;
  border-radius: 4px;
}

.ff-content-container {
  grid-area: content;
  padding: 0 2vw;
}

::-webkit-details-marker {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body class="page-with-sidebar">

    <div class="ff-sidebar-container">
        <nav class="ff-sidebar">
            <a id="sidebar-logo" class="sidebar-toggle">
                <img id="logo-big"  />
                <img id="logo-small"  />
            </a>

            <div class="sidebar-links">
                <details>
                    <summary>
                        <a class="sidebar-link" data-scroll href="#section-intro">
                            <span>
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
                                </svg>
                            </span>
                            <label><strong>Start</strong></label>
                        </a>
                    </summary>
                    
                    <a class="sidebar-link">
                        <span>
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <circle cx="12" cy="12" r="4"/>
                            </svg>
                        </span>
                        <label>One</label>
                    </a>
                    
                    <a class="sidebar-link">
                        <span>
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <circle cx="12" cy="12" r="4"/>
                            </svg>
                        </span>
                        <label>Two</label>
                    </a>
                    
                    <a class="sidebar-link">
                        <span>
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <circle cx="12" cy="12" r="4"/>
                            </svg>
                        </span>
                        <label>Three</label>
                    </a>
                  
                    <a class="sidebar-link">
                        <span>
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <circle cx="12" cy="12" r="4"/>
                            </svg>
                        </span>
                        <label>Five</label>
                    </a>
                  
                    <a class="sidebar-link">
                        <span>
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <circle cx="12" cy="12" r="4"/>
                            </svg>
                        </span>
                        <label>Six</label>
                    </a>
                  
                    <a class="sidebar-link">
                        <span>
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <circle cx="12" cy="12" r="4"/>
                            </svg>
                        </span>
                        <label>Seven</label>
                    </a>
                  
                    <a class="sidebar-link">
                        <span>
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <circle cx="12" cy="12" r="4"/>
                            </svg>
                        </span>
                        <label>Eight</label>
                    </a>
                  
                    <a class="sidebar-link">
                        <span>
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <circle cx="12" cy="12" r="4"/>
                            </svg>
                        </span>
                        <label>Eight</label>
                    </a>
                  
                    <a class="sidebar-link">
                        <span>
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <circle cx="12" cy="12" r="4"/>
                            </svg>
                        </span>
                        <label>Nine</label>
                    </a>
                  
                    <a class="sidebar-link">
                      <span>
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <circle cx="12" cy="12" r="4"/>
                            </svg>
                        </span>
                      <label>Ten</label>
                    </a>
                </details>
            </div>
        </nav>
    </div>

    <div class="ff-content-container">
        <section id="section-intro">
            <div class="row padding-top-small margin-bottom-small">
                <div class="portion whole">
                    <div class="border-thick margin-bottom-tiny"></div>
                    <h4>01 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</h4>
                </div>
              
              <div class="portion whole">
                    <div class="border-thick margin-bottom-tiny"></div>
                    <h4>02 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</h4>
                </div>
              
              <div class="portion whole">
                    <div class="border-thick margin-bottom-tiny"></div>
                    <h4>03 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</h4>
                </div>
              
              <div class="portion whole">
                    <div class="border-thick margin-bottom-tiny"></div>
                    <h4>04 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</h4>
                </div>
              
              <div class="portion whole">
                    <div class="border-thick margin-bottom-tiny"></div>
                    <h4>05 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</h4>
                </div>
              
              <div class="portion whole">
                    <div class="border-thick margin-bottom-tiny"></div>
                    <h4>06 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</h4>
                </div>
              
              <div class="portion whole">
                    <div class="border-thick margin-bottom-tiny"></div>
                    <h4>07 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</h4>
                </div>
            </div>
        </section>

＆＃13;

基本设置 -

左侧是可折叠的侧边栏，右侧是内容。坍方通过单击侧栏顶部的白色框来触发。
侧边栏折叠基本上改变了grid-template-columns属性页面。
补充工具栏有一个HTML details和summary元素，可以打开和折叠。
侧边栏链接每个都有一个图标和一个标签。
折叠侧边栏后，只有图标可见，并且标签在通过链接悬停在postion: absolute上时显示为徽章。

现在，我的问题是，如果我在侧边栏上启用overflow-y: scroll，则会隐藏此label。如何保持label的预期行为，并且还有侧边栏滚动？

需要做什么：

在边栏上启用overflow-y: scroll后实际发生了什么

基本上不允许单向溢出。如果它能完成工作，我也会接受简单的JS解决方案。

具有固定位置父级的溢出元素

0 个答案: