Блог

Главная - Вопросы по программированию - Адаптивная вертикальная полоса прокрутки для содержимого вкладки jQuery Mobile, когда панель навигации находится в заголовке

Адаптивная вертикальная полоса прокрутки для содержимого вкладки jQuery Mobile, когда панель навигации находится в заголовке

#jquery #jquery-mobile #overflow #jquery-mobile-navbar #jquery-mobile-table

#jquery #jquery-mobile #переполнение #jquery-mobile-navbar #jquery-mobile-table

Вопрос:

На некоторых вкладках jQuery mobile у меня есть содержимое, для которого требуется полоса прокрутки.

Панель навигации, которая управляет ими, находится в заголовке, как в этой скрипке.

Я попытался установить height: 100%; overflow: auto; все уровни содержимого вкладки, но полоса прокрутки по-прежнему применяется ко всей странице в целом.

Как можно адаптивно применить переполненную полосу прокрутки только к содержимому с вкладками?

jsFiddle

HTML

 <div data-role="page" id="mainPage">
    <div data-role="tabs" id="tabs">
        <div data-role="header" style="overflow:hidden;">
            <h1>I'm a header</h1>
            <a href="#" data-icon="gear" class="ui-btn-right">Options</a>
            <div data-role="navbar">
                <ul>
                    <li><a href="#one" class="ui-btn-active">One</a></li>
                    <li><a href="#two">Two</a></li>
                    <li><a href="#">Three</a></li>
                </ul>
            </div>
        </div>
        <div id="one" class="ui-body-d ui-content tabContent">
            <h1>First tab contents</h1>
        </div>
        <div id="two">
            <ul data-role="listview" data-inset="true">
                <li><a href="#">Acura</a></li>
                <li><a href="#">Audi</a></li>
                <li><a href="#">BMW</a></li>
                <li><a href="#">Cadillac</a></li>
                <li><a href="#">Ferrari</a></li>
            </ul>
        </div>
    </div>
</div>

JS

 $(document).ready(function() {
    var $one = $('#one')
    for(var i=0; i<1000; i  ){
        $one.append('<br/>content')
    }

})

CSS

 body{
    overflow:hidden;
}
.tabContent{
    height:100%;
    overflow:auto;
}

Комментарии:

1. вы имеете в виду, что вы не хотите, чтобы тело имело переполнение, а вкладка имела полосы прокрутки?

2. @AminJafari Да, я бы хотел, чтобы окно в целом не прокручивалось, но я хочу, чтобы содержимое между верхним и нижним колонтитулами, которые являются содержимым вкладок, прокручивалось только. Большое спасибо, что посмотрели на мой вопрос!

3. вы пробовали установить скрытый параметр overflow body как скрытый? и для вкладок, которые вы хотите прокручивать overflow-y:scroll;

4. @AminJafari Страница больше не прокручивается, но полоса прокрутки на вкладке «отключена».

5. можете ли вы показать мне какой-нибудь код или лучше jsFiddle?

Ответ №1:

вам нужно что-то подобное? http://jsfiddle.net/VjYq9/3 /

 #one{
    height:330px;
    overflow-y:scroll;
}

ОБНОВЛЕНИЕ: вот так http://jsfiddle.net/VjYq9/5 /

 $one.height($(window).height()-120); //note that -120 must be the size of the header, so it is the window size minus the size of the header so "#one" would fit the screen!

Комментарии:

1. Спасибо за ваше время, Амин, но я ищу адаптивное поведение, поэтому нет фиксированной высоты. Возможно ли это использовать height:100%; ?

2. Еще раз спасибо, Амин Джафари (прошу прощения за обращение к вам по имени в последнем комментарии), но я ищу несколько правил CSS (извините, что не указал ранее). Я могу использовать этот метод, но моя страница очень активна, поэтому я надеялся избежать этого маршрута для удобства управления. Действительно ли CSS не имеет возможности управлять этим?

3. все в порядке, мой друг, ты можешь называть меня Амин. и, к сожалению, нет, нет способа сделать это с помощью CSS (по крайней мере, насколько я знаю). поскольку CSS загружается сразу при загрузке страницы, следовательно, он может устанавливать только указанные значения для элементов и не может вычислять высоту окна и не может устанавливать динамические значения!

4. Эх, ладно. Я дам вам проверку, пока кто-нибудь не найдет хак, или CSS, наконец, догонит реальность веб-приложений. Еще раз спасибо за ваши усилия.

Ответ №2:

Существует решение только для CSS, @user1382306, пожалуйста, смотрите Ниже:

 .max-height-occupied {
    position: absolute;
    top: 88px; /*your header height*/
    right: 0;
    bottom: 44px; /*your footer height */
    left: 0;
}

И в вашем целевом разделе содержимого просто укажите это так:

 <div data-role="content" data-theme="b" class="max-height-occupied">
Метки: