Как создать простую полосу прокрутки страницы без использования jQuery?

Я посмотрел, я думаю, что все коды прокрутки, но еще не смогли найти простой, который не использует jQuery или несколько сложную библиотеку.Как создать простую полосу прокрутки страницы без использования jQuery?

Создал ли кто-нибудь свою простую полосу прокрутки, используя только javascript? То, что я ищу, является примером того, как это можно сделать. В частности, у меня есть простой начальной загрузки веб-страницы с:

<body> 
    <header> ....</header> 
    <main> ......</main> 
</body>

То, что я хотел бы сделать это, чтобы быть в состоянии иметь небольшой в страницы полосы прокрутки появляются справа от области, если содержание там больше будет помещаться на одной странице. Для целей стилизации я бы хотел, чтобы это не было полосой прокрутки браузера по умолчанию.

Вот пример того, что я ищу, но этот действительно использует JQuery, так что я не могу использовать его на моем сайте:

http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/complete_examples.html

Я ищу какой-нибудь способ сделать это с помощью JavaScript в современный браузер IE9 и выше. Поскольку я думаю, что это было бы полезно для многих людей, я открыл для них 200 000 фунтов в надежде, что кто-то может стать хорошим примером перетаскиваемой полосы прокрутки страниц, которая также будет реагировать на колесико мыши, когда будет находиться над областью содержимого страницы.

Просто обновление. Я не ищу мобильное решение для этого. Я просто ищу решение, которое будет работать в браузере PC/Mac. Сайт не настроен или подходит для телефона. Его можно использовать на IPad/планшете, но для этих целей я бы хотел, чтобы по умолчанию для прокрутки отображался обычный метод прокрутки планшета.

источник

2014-12-05 Samantha J T Star

Некоторые браузеры позволяют вам настраивать собственную полосу прокрутки. Я не рекомендую использовать пользовательскую полосу прокрутки, потому что если что-то сломается в вашем JS-коде, пользователи не смогут прокручивать. – Oriol

Будет ли ['noraesae/perfect-scrollbar'] (https://github.com/noraesae/perfect-scrollbar) работать на вас? [** DEMO **] (http://noraesae.github.io/perfect-scrollbar/). В нем указано, что «* perfect-scrollbar является минималистичным, но идеальным (для меня и, возможно, для большинства разработчиков) плагином прокрутки, работающим с jQuery или ** ванильным JavaScript ** **.* " – h2ooooooo

Вы можете сделать свою собственную полосу прокрутки с помощью js, используя события, и вручную установить положение элементов и прокрутку содержимого, это было бы не так сложно, но я думаю, должно быть какое-то лучшее решение. – Mykybo

Удивительно, но там нет отличного, простого решения, использующего ванильный JavaScript. Я сделал чистое JS легкое, минимальное кросс-браузерное решение. Настройка ваших собственных потребностей и эстетики

Обновление включает перемещаемой пролистайте:
Вот является fiddle и CodePen

HTML

<body> 
    <div id="main" class="scrollable"> 
     <div class="content-wrapper"> 
      <div class="content"> 
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt accusamus maxime voluptatem quasi. Recusandae optio nobis ratione iste consectetur consequatur cupiditate saepe laborum natus neque a provident eum explicabo delectus qui accusantium nostrum reiciendis soluta hic ut at sed laboriosam possimus repudiandae deserunt velit rerum. Aliquam ratione itaque corrupti aperiam quisquam unde aspernatur odio id repellendus corporis eaque expedita in ab minus possimus! Quo tempore consequatur repellat consectetur nemo molestiae perferendis ipsum esse nesciunt blanditiis nobis dicta? Laudantium quaerat inventore deleniti exercitationem explicabo quos pariatur sunt earum labore sed eius blanditiis architecto consequuntur ad consectetur unde sapiente nisi. Sunt eos.</p> 
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt accusamus maxime voluptatem quasi. Recusandae optio nobis ratione iste consectetur consequatur cupiditate saepe laborum natus neque a provident eum explicabo delectus qui accusantium nostrum reiciendis soluta hic ut at sed laboriosam possimus repudiandae deserunt velit rerum. Aliquam ratione itaque corrupti aperiam quisquam unde aspernatur odio id repellendus corporis eaque expedita in ab minus possimus! Quo tempore consequatur repellat consectetur nemo molestiae perferendis ipsum esse nesciunt blanditiis nobis dicta? Laudantium quaerat inventore deleniti exercitationem explicabo quos pariatur sunt earum labore sed eius blanditiis architecto consequuntur ad consectetur unde sapiente nisi. Sunt eos.</p> 
      </div> 
     </div> 
    </div> 
    <div>Not special and not contained within scrolling</div> 
</body>

CSS

.scrollable { 
    padding: 0% 10%; 
    position: relative; 
    border: 1px solid gray; 
    overflow: hidden; 
    height: 400px; 
} 

.scrollable.showScroll::after { 
    position: absolute; 
    content: ''; 
    top: 5%; 
    right: 7px; 
    height: 90%; 
    width: 3px; 
    background: rgba(224, 224, 255, .3); 
} 

.scrollable .content-wrapper { 
    width: 100%; 
    height: 100%; 
    padding-right: 50%; 
    overflow-y: scroll; 
} 
.scroller { 
    z-index: 5; 
    cursor: pointer; 
    position: absolute; 
    width: 10px; 
    border-radius: 5px; 
    background: rgb(111, 111, 190); 
    top: 0px; 
    right: 3px; 
    -webkit-transition: top .08s; 
    -moz-transition: top .08s; 
    -ms-transition: top .08s; 
    -o-transition: top .08s; 
    transition: top .08s; 
} 
.content { 
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
}

(function() { 

var scrollContainer = document.querySelector('.scrollable'), 
    scrollContentWrapper = document.querySelector('.scrollable .content-wrapper'), 
    scrollContent = document.querySelector('.scrollable .content'), 
    contentPosition = 0, 
    scrollerBeingDragged = false, 
    scroller, 
    topPosition, 
    scrollerHeight; 

function calculateScrollerHeight() { 
    // *Calculation of how tall scroller should be 
    var visibleRatio = scrollContainer.offsetHeight/scrollContentWrapper.scrollHeight; 
    return visibleRatio * scrollContainer.offsetHeight; 
} 

function moveScroller(evt) { 
    // Move Scroll bar to top offset 
    var scrollPercentage = evt.target.scrollTop/scrollContentWrapper.scrollHeight; 
    topPosition = scrollPercentage * (scrollContainer.offsetHeight - 5); // 5px arbitrary offset so scroll bar doesn't move too far beyond content wrapper bounding box 
    scroller.style.top = topPosition + 'px'; 
} 

function startDrag(evt) { 
    normalizedPosition = evt.pageY; 
    contentPosition = scrollContentWrapper.scrollTop; 
    scrollerBeingDragged = true; 
} 

function stopDrag(evt) { 
    scrollerBeingDragged = false; 
} 

function scrollBarScroll(evt) { 
    if (scrollerBeingDragged === true) { 
     var mouseDifferential = evt.pageY - normalizedPosition; 
     var scrollEquivalent = mouseDifferential * (scrollContentWrapper.scrollHeight/scrollContainer.offsetHeight); 
     scrollContentWrapper.scrollTop = contentPosition + scrollEquivalent; 
    } 
} 

function createScroller() { 
    // *Creates scroller element and appends to '.scrollable' div 
    // create scroller element 
    scroller = document.createElement("div"); 
    scroller.className = 'scroller'; 

    // determine how big scroller should be based on content 
    scrollerHeight = calculateScrollerHeight(); 

    if (scrollerHeight/scrollContainer.offsetHeight < 1){ 
     // *If there is a need to have scroll bar based on content size 
     scroller.style.height = scrollerHeight + 'px'; 

     // append scroller to scrollContainer div 
     scrollContainer.appendChild(scroller); 

     // show scroll path divot 
     scrollContainer.className += ' showScroll'; 

     // attach related draggable listeners 
     scroller.addEventListener('mousedown', startDrag); 
     window.addEventListener('mouseup', stopDrag); 
     window.addEventListener('mousemove', scrollBarScroll) 
    } 

} 

createScroller(); 


// *** Listeners *** 
scrollContentWrapper.addEventListener('scroll', moveScroller); 
}());

Концепция проста. У нас есть главный div с «прокручиваемым» классом. JavaScript распознает этот элемент и добавляет скроллер-дивер, который можно стилизовать самостоятельно с помощью CSS. Вложенным дочерним div-оболочкой content-wrapper мы можем эффективно нажимать собственный скроллер вне родительского div, все еще контролируя отступы.

Вот схема: Scroll Diagram

Причина, почему мы должны поддерживать нативную возможность прокрутки происходит потому, что событие прокрутки JavaScript срабатывает только на элементах, которые перелив набор для прокрутки.См. MDN reference on scroll. Преимущество состоит в том, что если JS отключен, мы все равно грациозно отменим прокрутку без полосы прокрутки.

ПРИМЕЧАНИЕ
Следует отметить, что вам придется настроить свою версию, чтобы пересчитать размер скроллер в некоторых случаях:
1.) Где изменяет размер экрана или
2.) Если более содержимое добавляется.

Во-вторых, изменения должны быть сделаны, если у вас есть несколько «прокручиваемых» элементов. В этом случае вам нужно будет перебрать эти элементы, чтобы как добавить div скроллера, так и прослушать событие прокрутки.

источник

2015-02-23 04:39:01 AdamSchuld

AdamSchuld - Большое спасибо за то, что нашли время, чтобы помочь мне с моей проблемой. Я попробовал скрипку в IE и Chrome, но я не вижу полосы прокрутки. Когда у вас есть время, вы можете это проверить. Возможно, что-то мне не хватает. Я заметил, что у вас есть веб-сайт для вашей работы. Возможно, можно будет добавить образец страницы на этот сайт, чтобы показать свиток. Просто что-то вроде http://designgumption.com/scroll.html Это просто мысль, так как иногда мне трудно видеть результаты скриптов в маленьком окне, которое они используют. Еще раз спасибо –

В Codepen (http://codepen.io/ElGrecode/pen/LEmbBE) я вытащил эффектный эффект анимации, возможно, это было свойство css, вызывающее проблемы. Помимо IE, это проверяется кросс-браузер. – AdamSchuld

Спасибо. Я снова посмотрел на вашу реализацию jsfiddle, и она работает, когда я перемещаю колесо мыши или курсор, а затем снова выходит из вида. Меня это смутило, так как я все время ждал, когда увижу штангу. Поэтому ваша версия кодекса, я думаю, лучше. Когда я смотрю на codepen, я вижу свиток, который они используют, который действительно хорош. Считаете ли вы, что сможете добавить к своей реализации, чтобы пользователь мог также перетаскивать полосу прокрутки, например, с помощью полос прокрутки в кодефене? –

Ужасно baron.js library. Это может быть пользователь с jQuery или без него. Идея точно такая же, как @AdamSchuld описать в своем ответе.

Его преимущества:

не заменяет родную механику системы прокрутки (это важно, если вы хотите, чтобы ваша полоса прокрутки, чтобы выглядеть заказной, но сохранить оригинальную платформу или поведение устройства).
Настраиваемый дизайн прокрутки с полной поддержкой CSS.
Никаких сильных зависимостей от jQuery.
система плагин (исправимые заголовки, липкая сноска, автотесты и более)
Может быть inited на скрытых блоках

Вот simple demo of it.

источник

2015-02-27 22:00:42

Я знаю, что на этот вопрос уже есть ответ, но как только OP захотел создать простое решение для ванильного javascript, которое работает в современных браузерах, - и я думаю, что, вероятно, это потребует больше людей опаздывайте, отвечая на этот вопрос здесь, потому что я разработал very simple and lightweight library in pure vanilla JS (DEMO), и это только 1 КБ после gzipping и minification.

Он использует родной свиток, поэтому он работает во всех современных браузерах (Firefox, Chrome, Opera, Safari, Edge), а также в IE10 и IE11. Вы также можете использовать его в IE9, включив полисполком классаList.

Поддерживаются все браузеры на базе Android, iOS и Windows Phone.

Смотрите более подробный ответ здесь: Custom scrollbars

Или прочитать полный учебник в SimpleScrollbar's Github README page.

источник

2015-09-06 15:44:22 Buzinas

Как создать простую полосу прокрутки страницы без использования jQuery?

ответ

Смежные вопросы