HTML Элемент позиции прокрутки HTML

Question

В настоящее время я делаю некоторые улучшения на веб-сайте и столкнулся с следующей проблемой.

Веб-сайт имеет липкий/фиксированный заголовок, при этом прокручивается только тело.

Одна из страниц имеет большую таблицу данных, которая расширяется до ширины более 1000 пикселей, а высота также может быть довольно высокой в ​​зависимости от выбора даты для данных.

Теперь моя проблема в том, что прокрутка включена в div, которая обертывает таблицу, но вам нужно прокрутить весь путь до нижней части, чтобы увидеть полосу прокрутки.

Что бы я хотел знать, есть ли способ передвинуть горизонтальную полосу прокрутки с помощью javascript или css на нижний колонтитул моего веб-сайта, поскольку этот элемент всегда отображается пользователю?

Пример:

Footer перекрывает таблицу, таким образом, вы должны прокрутить весь путь до нижней части страницы, чтобы увидеть горизонтальную полосу прокрутки. Я хотел бы переместить горизонтальную полосу прокрутки широкого стола в нижний колонтитул моих сайтов, где она всегда видна. Оболочка стола и нижний колонтитул не вложены друг в друга.

Пример кода я в настоящее время с помощью (HTML):

<div class="wmd-view-topscroll"> 
    <div class="scroll-div"> 
     &nbsp; 
    </div> 
</div> 

<div class="wmd-view"> 
    <div class="dynamic-div"> 
<table class="results table table-striped table-bordered table-condensed" style="table-layout: fixed; width:1750px;"> 
<!-- Contents here --> 
</table> 
</div> 
    </div> 
</div> 

Пример кода настоящее время я использую (Jquery):

$(function() { 

    $(".wmd-view-topscroll").scroll(function() { 
     $(".wmd-view") 
     .scrollLeft($(".wmd-view-topscroll").scrollLeft()); 
    }); 

    $(".wmd-view").scroll(function() { 
     $(".wmd-view-topscroll") 
     .scrollLeft($(".wmd-view").scrollLeft()); 
    }); 
    $(".wmd-view-topscroll").prependTo($("#siteFooter")); 
}); 

$(window).load(function() { 
    $('.scroll-div').css('width', $('.dynamic-div').outerWidth()); 
}); 

Приведенный выше код в основном создает клон скроллинга, то Я хватаю HTML и appendTo мой нижний колонтитул, который работает, но теперь у меня все еще есть полоса прокрутки на моей основной обертке таблицы.

Когда вы прокладываете весь путь до дна, вы видите 2x полосы прокрутки. Тот, который я разместил в нижнем колонтитуле, плюс один из основной обертки стола. Если я попытаюсь внести изменения в свойства переполнения .wmd-view, он также изменит значение в нижнем колонтитуле.

Любые другие предложения более чем приветствуются.

Заранее спасибо.

Answer 1

Try установка height для .dynamic-div и дать overflow: auto