溢出：滾動不起作用

我創建了一個浮動/固定面板從頁面底部向上滑動的網頁。在這個窗格中有一個子div，其內容需要滾動，我將overflow設置爲scroll和auto，但似乎沒有任何關鍵。應該指出，我使用easytabs.js插件切換面板內的內容，我相信這可能是它不能按預期工作的原因。溢出：滾動不起作用

你可以找到一個鏈接的網頁here

任何人都可以看看，並告訴我什麼，我做錯了什麼？

相關的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; 
}

來源

2013-10-07 Imran

只需將＃menu-content css overflow更改爲自動或滾動。

來源

2013-10-11 07:17:58

Bobby回答後，用Nice Scroll擺脫默認的滾動。 – Dznr

@Bobby我不相信我錯過了這個。謝謝！ – Imran

@Dznr感謝這是一個非常好的插件 – Imran

基本上，div的內容有超過div的大小，以便溢出：滾動工作。要麼讓內容更大，要麼讓div更小，看看它是否適合你。此外，div上的「overflow：auto」會將其設置爲僅垂直滾動，而「overflow：scroll」會將其設置爲垂直滾動和水平滾動。只是一個側面說明。

來源

2013-10-07 23:47:21

內容_does_超過div，因此您無法看到它。因爲它不在可能導致你相信內容已經完成的下一行。 – Imran

'overflow：auto'會在兩個方向**上滾動'div'（或任何其他元素）**如果**那裏溢出。 – sam

你可以處理這個問題的一種方法是通過爲div「tab-side-container」，div「panel-container」和div「specials-tab」設置高度：100％。你還需要在「specials-tab」上設置「overflow：scroll」。您可能還需要將「特殊選項卡」子div設置爲高度：100％。

在Chrome中適用於我。

來源

2013-10-08 00:47:36 LiavK

你在這裏正確的道路上，一個滾動條現在顯示..但摺疊下面的div仍然不顯示..它就好像它被切斷..如果你通過Chrome檢查器看，你會看到第四個div應該被顯示。 – Imran

啊，那個騙了我一分鐘 - 起初我想設置菜單標籤到100％的高度，但它會打破你的界面。嘗試設置高度：在切斷的子div上100％。這應該正確地服務於馬薩拉。一般來說，你需要小心div的高度是正確的 - 有很多東西可能會導致它們崩潰，這會弄亂佈局。好看的網站，順便說一句。 – LiavK

謝謝！我已經改變了最後一個div的格式，它顯示在正確的位置，所以它現在可見。我認爲這與'＃menu-content'或'＃tab-side-container'有關。其中一個跡象是，即使滾動條在瀏覽器底部被切斷。對我而言，Chrome和Safari都會出現此問題。 – Imran

老弟，我檢查您的網站，這個問題是不是在CSS文件，問題是在jQuery插件命名同位素，同位素注入這段代碼：

overflow: hidden;

截至樣式屬性。菜單類，所以你需要正確配置插件。

你可以試試，替換此代碼：

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

對於此代碼：

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

乾杯！

來源

2013-10-12 03:07:43 jCaMaX

只是改變specials-tab height(less then 860px)，也給specials-tab到

overflow:scroll;

你也可以給它的孩子，如果你想向左滾動設置這些屬性，右DIV分別

來源

2013-10-14 11:07:16 Anup

請添加到CSS屬性在你的CSS

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

enter link description here也從這裏檢查網站的問題

來源

2013-10-15 07:11:26

試試這個。無論是＃菜單內容{溢出：汽車}或＃菜單內容{溢出：滾動}

來源

2013-10-17 03:55:47 TechyTee

工作jsbin：（我克隆你的網站在jsbin顯示例如它的工作）
http://jsbin.com/eWoXUHe/1

詳情：

溢出自動滾動默認。但是，如果div不高於窗口（或包含div）高度，則沒有任何可滾動的內容，因此它不會滾動。如果你想滾動，那麼只要使窗口高於窗口（或包含div）的高度即可。

從審查您的網站，我立即注意到.specials-tab是1080px高。正因爲如此，這個div遠遠低於頁面的底部。你需要使這個包含div更小，例如500px。

將包含div高度較小後，您可以滾動內部內容。您可能還需要將overflow: scroll添加到內部div（一旦您將外部div高度縮小，它就會工作）。

SOLUTION：

下面的代碼將解決您的網站：

.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或任何想要的像素。

來源

2013-10-17 20:09:19 Accelerator

這將內容的大小限制在固定高度（在您的示例中爲300px），內容應填充整個y長度（動態）。 – Imran

你可以使它動態就好。這並不難，但不限於固定的高度。嘗試使用百分比。百分比也很好。 – Accelerator

-1

你可以你的CSS更改爲類似下面：

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

我想，這達到你的要求。

來源

2013-10-17 21:43:28

溢出：滾動不起作用

回答

相關問題