2017-09-20 54 views
0

我正在创建rails应用程序。并且我希望有一方在​​新闻更新将来。总之我想制作垂直新闻馈送。这就是我所做的。但现在呢?我在网上搜索了一些新闻动态插件,但是一些插件如何没有问题。如何滚动父div中的subdivs

<%#= page.html.erb %> 

<%= stylesheet_link_tag 'welcomeindex', media: 'all', 'data-turbolinks-track' => true %> 
<%= javascript_include_tag 'welcomeindex' %> 

<div class="row"> 

    <div class="jumbotron col-lg-10 col-md-12" style="background-color:grey;"></div> 

    <div class="jumbotron col-lg-2 col-md-12"> 

     <div id="newsFlash" class="updates">NEWS</div> 

     <div id="newsPosts" class=""> 

     <%#= it will go in loop manner %> 
     <% for i in 0..90 do %> 
      <div class="card"> 
      <div class="card-body"> 
       Here update will go 
      </div> 
      </div> 
     <% end %> 

     </div> 

    </div> 

</div> 

welcomeindex.js

//= require application 

$(function() { 
    blinkeffect('#newsFlash'); 
}) 

function blinkeffect(selector) { 
    $(selector).fadeOut('slow', function() { 
    $(this).fadeIn('slow', function() { 
     blinkeffect(this); 
    }); 
    }); 
} 

welcomeindex.css

*= require bootstrap 
*= require application 

.jumbotron{ 
    height: calc(100vh - 78px); 
    min-height: calc(100vh - 155px); 
    //overflow: hidden; 
} 

.jumbotron{ 
    margin-bottom: 0px; 
} 

@media (max-width: 991px) { 

    .jumbotron{ 
    height: 100%; 
    } 

} 

div.jumbotron.col-lg-2.col-md-12{ 
    padding: 2rem 1rem; 
} 

.updates{ 
    text-align: center; 
    background-color: transparent; 
    border: none; 
} 

#newsFlash{ 
    color: red; 
} 

如何利用CSS和jQuery做呢?

回答

0

我没有类似的东西,以滚动的div另一个DIV中使用CSS

#div_id { 
    max-height: *whatever you want*px; 
    overflow-y: scroll; 
} 

如果你想摆脱滚动条,你可以使用隐藏

::-webkit-scrollbar { 
    width: 0px; 
}