Quitar Scroll en bootstrap

publicado por: Anonymous

Estoy usando bootstrap, tengo una ventana modal a la cual le quiero quitar el scroll, pero poder scrolear! Solo quiero que no este a la vista. Esta modal la tengo dentro de otra ventana modal.

×

Poblacion

                                        <span class="input-group-btn">
                                            <button class="btn btn-default" type="button" id="buscarpoblacionmodal"> <span class="glyphicon glyphicon-search"> </span> </button>
                                        </span>
                                    </div>
                                </div>
                            </div> <!--____col-md-6___-->
                        </div> <!--Modal Header-->
                        <div class="modal-body modalpoblacion">
                            <table class="table table-striped table-condensed">
                                <thead>
                                    <tr>
                                        <th>
                                            Codigo Postal
                                        </th>
                                        <th>
                                            Poblacion
                                        </th>
                                        <th>
                                            Provincia
                                        </th>
                                </thead>

                                <tbody id="cuerpotabla"></tbody>
                            </table>
                        </div><!--modal-body-->
                    </div><!--Modal Content-->
                </div><!--Modal Dialog-->
            </div><!--Modal Fade-->

solución

Hay algunas propiedades no estándar para modificar los estilos de los scroll, por ejemplo ::-webkit-scrollbar, pero posiblemente no funcionen en todos los navegadores o dejen de funcionar en alguna actualización.

También se podría intentar algo con JavaScript pero lo mas sencillo y compatible con todos los navegadores es usar un pequeño truco y ocultar la barra de scroll debajo de un div:

_x000D_

_x000D_

section {_x000D_
  border: solid 1px red;_x000D_
  width: 50%;_x000D_
  height: 200px;_x000D_
  overflow: hidden;_x000D_
  position: relative;_x000D_
}_x000D_
_x000D_
div {_x000D_
  position: absolute;_x000D_
  left: 0;_x000D_
  top: 0;_x000D_
  right: -20px;_x000D_
  bottom: 0;_x000D_
  padding-right: 15px;_x000D_
  overflow-y: scroll;_x000D_
  background:#eee;_x000D_
}

_x000D_

<section>_x000D_
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas architecto laudantium earum debitis, vero optio laboriosam! Sed mollitia odit impedit similique esse, ipsum facilis voluptas recusandae beatae ducimus adipisci magni doloremque consectetur_x000D_
    nihil provident blanditiis odio perspiciatis ut. Fugit, tenetur nulla at dicta id sequi similique, unde sit. Atque nihil unde est aspernatur sapiente provident corporis dolores maiores dolore harum, labore fugit eveniet cum, fugiat facere dolorum_x000D_
    maxime quo assumenda mollitia rerum odit eius explicabo dignissimos! Deleniti porro alias, amet, temporibus impedit, facilis voluptatibus, ea quam eveniet unde voluptas aliquid. Eius, illo, repudiandae? Earum obcaecati provident hic perspiciatis placeat_x000D_
    optio.</div>_x000D_
</section>

_x000D_

_x000D_

_x000D_

Respondido por: user7176

Leave a Reply

Your email address will not be published. Required fields are marked *