Question

我正在制作rails app。而且我想要一个新闻更新的一方div。总之，我想制作垂直新闻馈线。这就是我所做的。但现在呢？我在网上搜索了一些新闻 - 自动收报机插件，但有些插件没有人担心。

<%#= 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做到这一点？

Answer 1

我做了一些类似于使用CSS

在另一个div中滚动div的东西

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

如果您想摆脱滚动条，可以使用

隐藏它

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

如何滚动父div中的细分

1 个答案: