2015-07-10 107 views
0

我在一个页面上有一个宽的iframe,我想使它可以水平滚动。为了实现这一点,我把它放在一个div中,并使用CSS来使div成为可滚动的元素。溢出滚动不能在容器div上工作

这一切都运行良好一段时间,但我必须改变的东西,打破了功能。我所做的一切似乎都没有让它再次起作用。 div显示正常,但ifame内容被切断(就像我已经将overflow-x设置为隐藏)。如果我将overflow-x设置为auto,即使div的内容太宽,也不会出现滚动条。如果我设置overflow-x滚动,那么滚动条会出现,但是不会被激活。我究竟做错了什么?

HTML

<div class="PopularTravelAccessories Centre"> 
 
    <h3 style="color:#e47911; font-family:Arial, Helvetica, sans-serif; text-align:left; line-height:0.2;">Title</h3> 
 
    <iframe src="/path-to-iframe.php?" frameborder="no" scrolling="no"></iframe> 
 
</div>

CSS

\t .PopularTravelAccessories 
 
\t \t { 
 
\t \t \t width:100%; 
 
\t \t \t max-width: 500px; 
 
\t \t \t position:relative; 
 
\t \t \t -webkit-overflow-scrolling: touch; 
 
\t \t \t overflow-x: auto; 
 
\t \t \t overflow-y: hidden; /*Remove vertical scroll bar*/ 
 
\t \t \t border-top:1px; 
 
\t \t \t border-top-style:dashed; 
 
\t \t \t border-top-color:#999999; 
 
\t \t \t margin-top:10px; 
 
\t \t \t border-bottom:1px; 
 
\t \t \t border-bottom-style:dashed; 
 
\t \t \t border-bottom-color:#999999; 
 
\t \t \t margin-bottom:10px; 
 
\t \t } 
 
\t \t 
 
\t \t .PopularTravelAccessories iframe 
 
\t \t \t { 
 
\t \t \t \t width: 100%; 
 
\t \t \t \t height:215px; 
 
\t \t \t }

回答

0

好,我偶然发现了解决方案,所有我需要做的是雷莫从iframe中滚动=“否”。不太清楚为什么会影响div的滚动,但它对我有用。