溢出:滚动不起作用

Overflow:scroll not working

本文关键字：不起作用 滚动 溢出      更新时间：2023-09-26

我创建了一个带有浮动/固定面板的网页，该面板从页面底部向上滑动。此窗格中是一个子div，其中包含需要滚动的内容，我已将overflow设置为 scroll 和auto但似乎没有人能做到这一点。应该注意的是，我正在使用 easytabs.js插件来切换面板内的内容，我相信这可能是它无法按预期工作的原因。

您可以在此处找到指向该页面的链接

谁能看一看，告诉我我做错了什么？

相关 CSS 如下

#menu-tab {
    display: block;
    /*background: rgba(255, 255, 255, 0.95);*/
    background: #fff;
    color: #000;
    font-size: 20px;
    padding: 10px 15px;
    margin: 0 auto; 
    width: 250px;
    text-align: center;
    cursor: pointer;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
#menu-content {
    display: none;
    /*background: rgba(255, 255, 255, 0.95);*/
    background: #fff;
    color: #111;
    /*padding: 30px 0;*/
    height: 1px;
    /*overflow: hidden;*/
}
/* Styles for Tabs on Side */
#tab-side-container { padding: 50px 0; }
#tab-side-container > ul { list-style: none; margin: 0 40px 0 0; padding: 5px 0; background: #f1f1f1; float: left; }
#tab-side-container > ul li { width: 200px; margin: 0; padding: 0; text-align: right; font-size: 28px; text-transform: uppercase; }
#tab-side-container > ul li a { display: block; padding: 11px 15px; outline: none; color: #000; }
#tab-side-container > ul li a:hover { text-decoration: underline; }
#tab-side-container > ul li.selected-tab { background: rgba(255, 255, 255, 0.95); position: relative; left: 1px; }
#tab-side-container > ul li:first-child.selected-tab { border-top: none; }
#tab-side-container > ul li a.selected-tab { text-decoration: none; }
#tab-side-container .panel-container { padding-top: 5px; padding-left: 240px; }
div.menu {
    overflow: auto;
}

只需将 #menu 内容的 css 溢出更改为自动或滚动即可。

>伙计，我检查您的网站，问题不在CSS文件中，问题出在名为同位素的jQuery插件中，同位素注入了以下代码：

   overflow: hidden;

作为 .menu 类的样式属性，因此您需要正确配置插件。

您可以尝试，替换此代码：

$container.isotope({
    itemSelector: '.menu div',
    animationEngine: 'css'
});

对于此代码：

 $container.isotope({
    itemSelector: '.menu div',
    animationEngine: 'css',
    containerStyle: {
        position: 'relative',
        overflow: 'auto'
    }
});

干杯！

处理

该问题的一种方法是设置高度：div "tab-side-container"、div "panel-container"和div "specials-tab"为 100%。您还需要在"specials-tab"上设置"overflow：scroll"。您可能还需要将"特殊选项卡"子div设置为高度：100%。

这在Chrome中对我有用。

基本上，div 的内容必须超过div 的大小才能使溢出：滚动工作。要么使内容变大，要么使div变小，看看这是否适合您。 此外，div 上的"overflow：auto"会将其设置为仅垂直滚动，而 "overflow：scroll" 会将其设置为垂直和水平滚动。只是一个旁注。

只是更改specials-tab height(less then 860px)并给出specials-tab 

overflow:scroll;
如果要

分别向左和向右滚动div，也可以将这些属性设置为它的子级

请在 CSS

中添加 CSS 属性

overflow-x: hidden;
overflow-y: scroll;

在此处输入链接说明也从此处检查网站问题

试试这个。#menu-content{overflow：auto} 或 #menu-content{overflow：scroll}

工作 jsbin：(我在 jsbin 中克隆了您的网站以显示它工作的示例(
http://jsbin.com/eWoXUHe/1

详：

默认情况下，溢出会自动滚动。 但是，如果div 不高于窗口(或包含div(的高度，则没有要滚动的内容，因此它不会滚动。如果您无论如何都想滚动，那么只需使div 高于窗口(或包含div(的高度。

通过查看您的网站，我立即注意到.specials-tab高 1080px。因此，该div 远远延伸到页面底部下方。您需要将其包含div 的尺寸缩小，例如 500px。

缩小包含div 高度后，您可以滚动内部内容。您可能还需要向内部div 添加overflow: scroll(一旦您缩小了外部div 高度，它就会起作用(。

溶液：

以下代码将修复您的网站：

.specials-tab, #starters-tab, #specials-tab, #main-dishes-tab, #sides-tab, #sundries-tab, #drinks-tab, #desserts-tab {
  height: 300px !important;
  overflow: scroll !important;
}

笔记：

  • 不要使用!important。而是手动height: 300px; overflow: scroll;添加到上述每个元素。我放了!important，这样你就可以看到它在 jsbin 中工作。
  • 我放了 300px，所以它足够小，让你看到它的工作。但是，您可以制作此500px或任何您想要的像素。

您可以将 css 更改为如下所示的内容：

    #parent {
    overflow-y: scroll;
    width: 100%;
    }
    #box1 {
    width: 15%;
    float: left;
    }
    #box2 {
    width: 80%;
    float: right;
    }

我认为这达到了你的要求。

相关文章：