Table with Horizontal Scroll as Default

Question

I got this table on my project : https://examples.bootstrap-table.com/index.html#options/large-columns.html, but I want to the default mouse scroll being the horizontal one, not vertical. How can I do that?

<div id="divtest" class="container mt-2 mb-2">
                <table id="tableteste" class="tabletest" data-toggle="table" data-search="true"
                    data-virtual-scroll="true" data-detail-view="true" data-show-export="true"
                    data-click-to-select="true" data-detail-formatter="detailFormatter">
                    <thead>
                        <tr>
                            <th data-field="tipo" data-sortable="true">Tipo </th>
                            <th data-field="codigo" data-sortable="true">Código </th>
                            <th data-field="descricao" data-sortable="false">Descrição </th>
                            <th data-field="quantidade" data-sortable="true">Quantidade (Und) </th>
                            {% for i in lista_estoque %}
                            <th data-field="{{i.fantasia}}" data-sortable="true">{{i.fantasia}}</th>
                            {% endfor %}
                            <th data-field="valorun" data-sortable="true">Valor Unitário (R$) </th>
                            <th data-field="valortot" data-sortable="true">Valor Total (R$) </th>


                        </tr>
                    </thead>
                    <tbody>
                        {% for i in lista_produto %}
                        <tr>

                            <td>{{i.tipo}}</td>
                            <td class="id{{i.id}}">{{i.codigo}}- <span style="color: red;">{{i.id}}</span></td>
                            <td class="id{{i.id}}">{{i.produto_desc}}</td>
                            <td></td>
                            {%if i.tipo == 'PI'%}
                            <td class="id{{i.id}}"> {{i.valoruni}}</td>
                            {%else%}
                            <td class="id{{i.id}}"> {{i.compvalortot}}</td>
                            {%endif%}
                            {%if i.tipo == 'PI'%}
                            <td class="id{{i.id}}"> {{i.valoruniDol}}</td>
                            {%else%}
                            <td class="id{{i.id}}"> {{i.compvalortotDol}}</td>
                            {%endif%}

                        </tr>
                        {% endfor %}

                    </tbody>
                </table>
            </div>

https://stackoverflow.com/questions/55152799/prevent-window-vertical-scroll-until-divs-horizontal-scroll-reaches-its-end maybe this will help — Ronald Rimele, Jan 15 '20 at 16:31

score 1 · Accepted Answer · answered Jan 15 '20 at 16:42

The solution I found :

$.fn.hScroll = function (options) {
                function scroll(obj, e) {
                    var evt = e.originalEvent;
                    var direction = evt.detail ? evt.detail * (-120) : evt.wheelDelta;

                    if (direction > 0) {
                        direction = $(obj).scrollLeft() - 120;
                    }
                    else {
                        direction = $(obj).scrollLeft() + 120;
                    }

                    $(obj).scrollLeft(direction);

                    e.preventDefault();
                }

                $(this).width($(this).find('div').width());

                $(this).bind('DOMMouseScroll mousewheel', function (e) {
                    scroll(this, e);
                });
            }

            $(".fixed-table-body").hScroll();

Table with Horizontal Scroll as Default

1 Answers1