ScrollPanel Вертикальный и горизонтальный

Question

Я все еще новичок в кодировании, я ссылался на ссылку ниже для кодов xhtml для ScrollPanel. Я копирую и вставляю Точные одинаковые коды, но это не получается одинаково.

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; 
} 

одной рубрике

<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>