Дисплей CSS: нет и конфликт tinyscrollbar

Question

Я корректирую веб-сайт одной страницы с частями, которые видны независимо. Например, когда я нажимаю кнопку «services», она переходит к той части страницы, не показывая другой контент.

Части обслуживания нуждаются в полосе прокрутки. Я использую tinyscrollbar для этого.

#services { width:1100px; height:440px; bottom:0; position:absolute; top:60px; display:none; } 

При отображении: ни один не включен, полоса прокрутки не работает. Он отображается, но панель не может прокручиваться. Полоса прокрутки работает, когда я удаляю отображение: нет, но она полностью меняет макет. Содержимое услуг (пункт 3-го меню) теперь отображается смешано с содержимым первого пункта меню при первом посещении. Это только при первом посещении. После использования меню проблема исчезла, а макет снова нормальный.

Не могу понять, как это решить.

Пожалуйста, помогите.

Спасибо!

p.s. Я не могу разместить сайт в Интернете сейчас. Я добавил несколько скриншотов, надеюсь, что все станет ясно. deleted display:noneadded display:none первый скриншот отображает прокручиваемую полосу прокрутки, а вторая - нет. Проблема возникает только при входе на веб-сайт. Когда кнопки толкаются, проблема исчезает

p.p.s. Пожалуйста, взгляните на эту проблему. Я загрузил сайт: test.iwebs.ws

Answer 1

Вы можете определить видимость: скрытый вместо дисплей: нет.

видимость: скрытый скрывает элемент, но по-прежнему занимает место в макете.

дисплей: нет полностью удаляет элемент из документа. Он не занимает места, хотя HTML для него все еще находится в исходном коде.

Answer 2

Вам необходимо использовать функцию tinyscrollbar_update() после того, как вы покажете div, если это было display: none; на странице груз.

var scrollbar = $('#services'); 
scrollbar.tinyscrollbar(); 

$('#services').show(); 

scrollbar.tinyscrollbar_update();