ScrollPanel垂直和水平方向

Question

我在編碼方面還是很新的，我提到了ScrollPanel的xhtml代碼的下面的鏈接。我複製並粘貼完全相同的代碼，但結果並不一樣。

http://www.primefaces.org/showcase/ui/panel/scrollPanel.xhtml

我想垂直和水平線滾動面板，但它原來是隻垂直。有誰知道原因？

Results I get

<h3 style="margin-top:0">Custom Scrollbars</h3> 
 
<p:scrollPanel style="width:250px;height:200px"> 
 
    <p> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean blandit tortor a ipsum vehicula, in semper sapien auctor. Nulla tempor eget est non consequat. Nulla sit amet lorem justo. Cras non tellus eros. Sed ultricies orci ut quam interdum fringilla. Nam vitae massa ac mi elementum mattis vel vitae sem. Ut eros ipsum, scelerisque a erat a, eleifend luctus nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus. 
 
    </p> 
 
    <p> 
 
     Vivamus ac ullamcorper magna. Aenean felis ante, elementum sit amet urna at, eleifend aliquet velit. Morbi a convallis magna. In nec leo vel dolor hendrerit pharetra. Cras in iaculis enim. Aenean porta sapien dignissim turpis dapibus, eu dictum velit elementum. Aliquam sollicitudin gravida luctus. 
 
    </p> 
 
    <p> 
 
     Ut vel nulla sit amet erat laoreet eleifend nec sed lacus. Quisque placerat diam vitae justo eleifend, rutrum mollis mauris fringilla. Curabitur turpis odio, euismod id lorem a, ultricies suscipit ligula. Pellentesque ut erat a leo rhoncus porta ac sed velit. Nunc at erat ligula. Fusce vehicula posuere interdum. Curabitur tempus, tortor at sollicitudin dapibus, erat ante varius nisl, id dictum erat ipsum porttitor ipsum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla id varius enim, sed rutrum orci. 
 
    </p> 
 
    <p> 
 
     Sed tincidunt urna quis metus lacinia commodo. Praesent convallis eros vel quam scelerisque bibendum. Mauris eget dignissim libero. Pellentesque sagittis sem quis ipsum viverra, sed consequat mi consectetur. Donec facilisis dapibus ultrices. Donec luctus auctor lacus, at congue nisi aliquet eu. Praesent in justo at risus faucibus ultricies. Fusce et libero lectus. Donec elementum pharetra sapien, at placerat purus sodales et. Vivamus iaculis lacus sed placerat rhoncus. Mauris iaculis sit amet nunc at placerat. Donec consequat euismod lacinia. Etiam nec quam vehicula, cursus massa in, ullamcorper erat. 
 
    </p> 
 
    <p> 
 
     Praesent volutpat scelerisque vestibulum. In eu massa non neque rutrum commodo. Nunc vel enim nisi. Aenean leo ipsum, molestie vel justo nec, pharetra luctus dui. Nunc rhoncus turpis id lorem luctus consequat. Nulla condimentum adipiscing turpis consequat semper. Etiam ullamcorper velit nec hendrerit malesuada. Praesent venenatis leo sit amet arcu commodo, sit amet porta tellus suscipit. Quisque mi tortor, vestibulum in arcu non, pretium auctor libero. In commodo luctus placerat. 
 
    </p> 
 
</p:scrollPanel> 
 
    
 
<h3>Native ScrollPanel</h3> 
 
<p:scrollPanel mode="native" style="width:250px;height:200px"> 
 
    <p> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean blandit tortor a ipsum vehicula, in semper sapien auctor. Nulla tempor eget est non consequat. Nulla sit amet lorem justo. Cras non tellus eros. Sed ultricies orci ut quam interdum fringilla. Nam vitae massa ac mi elementum mattis vel vitae sem. Ut eros ipsum, scelerisque a erat a, eleifend luctus nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus. 
 
    </p> 
 
    <p> 
 
     Vivamus ac ullamcorper magna. Aenean felis ante, elementum sit amet urna at, eleifend aliquet velit. Morbi a convallis magna. In nec leo vel dolor hendrerit pharetra. Cras in iaculis enim. Aenean porta sapien dignissim turpis dapibus, eu dictum velit elementum. Aliquam sollicitudin gravida luctus. 
 
    </p> 
 
    <p> 
 
     Ut vel nulla sit amet erat laoreet eleifend nec sed lacus. Quisque placerat diam vitae justo eleifend, rutrum mollis mauris fringilla. Curabitur turpis odio, euismod id lorem a, ultricies suscipit ligula. Pellentesque ut erat a leo rhoncus porta ac sed velit. Nunc at erat ligula. Fusce vehicula posuere interdum. Curabitur tempus, tortor at sollicitudin dapibus, erat ante varius nisl, id dictum erat ipsum porttitor ipsum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla id varius enim, sed rutrum orci. 
 
    </p> 
 
    <p> 
 
     Sed tincidunt urna quis metus lacinia commodo. Praesent convallis eros vel quam scelerisque bibendum. Mauris eget dignissim libero. Pellentesque sagittis sem quis ipsum viverra, sed consequat mi consectetur. Donec facilisis dapibus ultrices. Donec luctus auctor lacus, at congue nisi aliquet eu. Praesent in justo at risus faucibus ultricies. Fusce et libero lectus. Donec elementum pharetra sapien, at placerat purus sodales et. Vivamus iaculis lacus sed placerat rhoncus. Mauris iaculis sit amet nunc at placerat. Donec consequat euismod lacinia. Etiam nec quam vehicula, cursus massa in, ullamcorper erat. 
 
    </p> 
 
    <p> 
 
     Praesent volutpat scelerisque vestibulum. In eu massa non neque rutrum commodo. Nunc vel enim nisi. Aenean leo ipsum, molestie vel justo nec, pharetra luctus dui. Nunc rhoncus turpis id lorem luctus consequat. Nulla condimentum adipiscing turpis consequat semper. Etiam ullamcorper velit nec hendrerit malesuada. Praesent venenatis leo sit amet arcu commodo, sit amet porta tellus suscipit. Quisque mi tortor, vestibulum in arcu non, pretium auctor libero. In commodo luctus placerat. 
 
    </p> 
 
</p:scrollPanel> 
 
PrimeTek, Copyright © 2015 
 
All rights reserved.

Answer 1

試試這個..我得到這個堆棧overflow.This可能是有益的。

html,body{ 
 
    height: 100%; 
 
    overflow: hidden; 
 
} 
 

 
#container { 
 
    height: 100%; 
 
    overflow-y: auto; 
 
    background: red; 
 
} 
 

 
#line1, #line2, #line3 { 
 
    overflow-x: auto; 
 
    white-space: nowrap; 
 
    padding: 20px; 
 
    background: yellow; 
 
    margin: 30px; 
 
} 
 

 
.smallerDivs { 
 
    height: 112px; 
 
    width: 112px; 
 
    margin: 10px; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    background: #fff; 
 
}

<div id="container"> 
 
    <div id="line1"> 
 
     <div class="smallerDivs"></div> 
 
     <div class="smallerDivs"></div> 
 
     <div class="smallerDivs"></div> 
 
     <div class="smallerDivs"></div> 
 
     <div class="smallerDivs"></div> 
 
     <div class="smallerDivs"></div> 
 
     <div class="smallerDivs"></div> 
 
     <div class="smallerDivs"></div> 
 
    </div> 
 
    <div id="line2"> 
 
     <div class="smallerDivs"></div> 
 
     <div class="smallerDivs"></div> 
 
     <div class="smallerDivs"></div> 
 
     <div class="smallerDivs"></div> 
 
     <div class="smallerDivs"></div> 
 
     <div class="smallerDivs"></div> 
 
     <div class="smallerDivs"></div> 
 
     <div class="smallerDivs"></div> 
 
    </div> 
 
    <div id="line3"> 
 
     <div class="smallerDivs"></div> 
 
     <div class="smallerDivs"></div> 
 
     <div class="smallerDivs"></div> 
 
     <div class="smallerDivs"></div> 
 
     <div class="smallerDivs"></div> 
 
     <div class="smallerDivs"></div> 
 
     <div class="smallerDivs"></div> 
 
     <div class="smallerDivs"></div> 
 
    </div> 
 
</div>

Answer 2

CSS：

#nativeScroll{ 

    height:200px; 
    width:250px; 
    overflow-x: auto; 
    background: white; 
} 

#p { 
    width:500px; 
} 

的xHTML

<h3>Native ScrollPanel</h3> 
    <div id="nativeScroll"> 
    <div id="p"> 
     <p> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean blandit tortor a ipsum vehicula, in semper sapien auctor. Nulla tempor eget est non consequat. Nulla sit amet lorem justo. Cras non tellus eros. Sed ultricies orci ut quam interdum fringilla. Nam vitae massa ac mi elementum mattis vel vitae sem. Ut eros ipsum, scelerisque a erat a, eleifend luctus nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus. 
     </p> 
     <p> 
      Vivamus ac ullamcorper magna. Aenean felis ante, elementum sit amet urna at, eleifend aliquet velit. Morbi a convallis magna. In nec leo vel dolor hendrerit pharetra. Cras in iaculis enim. Aenean porta sapien dignissim turpis dapibus, eu dictum velit elementum. Aliquam sollicitudin gravida luctus. 
     </p> 
     <p> 
      Ut vel nulla sit amet erat laoreet eleifend nec sed lacus. Quisque placerat diam vitae justo eleifend, rutrum mollis mauris fringilla. Curabitur turpis odio, euismod id lorem a, ultricies suscipit ligula. Pellentesque ut erat a leo rhoncus porta ac sed velit. Nunc at erat ligula. Fusce vehicula posuere interdum. Curabitur tempus, tortor at sollicitudin dapibus, erat ante varius nisl, id dictum erat ipsum porttitor ipsum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla id varius enim, sed rutrum orci. 
     </p> 
     <p> 
      Sed tincidunt urna quis metus lacinia commodo. Praesent convallis eros vel quam scelerisque bibendum. Mauris eget dignissim libero. Pellentesque sagittis sem quis ipsum viverra, sed consequat mi consectetur. Donec facilisis dapibus ultrices. Donec luctus auctor lacus, at congue nisi aliquet eu. Praesent in justo at risus faucibus ultricies. Fusce et libero lectus. Donec elementum pharetra sapien, at placerat purus sodales et. Vivamus iaculis lacus sed placerat rhoncus. Mauris iaculis sit amet nunc at placerat. Donec consequat euismod lacinia. Etiam nec quam vehicula, cursus massa in, ullamcorper erat. 
     </p> 
     <p> 
      Praesent volutpat scelerisque vestibulum. In eu massa non neque rutrum commodo. Nunc vel enim nisi. Aenean leo ipsum, molestie vel justo nec, pharetra luctus dui. Nunc rhoncus turpis id lorem luctus consequat. Nulla condimentum adipiscing turpis consequat semper. Etiam ullamcorper velit nec hendrerit malesuada. Praesent venenatis leo sit amet arcu commodo, sit amet porta tellus suscipit. Quisque mi tortor, vestibulum in arcu non, pretium auctor libero. In commodo luctus placerat. 
     </p> 
    </div> 
    </div>