Круто! Но есть какие-то артефакты

[ghost]

Здравствуйте! Очень классный скролл, большое спасибо! Я встроил скролл в поиск на сайте, не подскажете, как избавиться вот от подобных артефактов?

Я делал скроллу display:none, но после инициализации плагина он сразу делает display:block и опять появляется пустой скролл https://tuning-soft.ru/

А также белая полоска - это ребро нативного скролла, ширина контейнера области прокрутки плагин делает 529px, а надо 530px, где-то 1px расходится, скролл вроде разной ширины на разных ОС

И когда мало результатов = нет скролла, но есть пустота, на мой взгляд, если нет скролла пустоту надо заполнять контентом.

[Diokuz]

Какой браузер, какая версия браузера, какая операционка?

[ghost]

Здравствуйте! Windows 10 свежая + Firefox 49.0.1 В Хроме все отлично, только в лисе наблюдаю. Пробовал кстати и в дефолтном профиле Firefox без плагинов, ничего не меняется.

[Diokuz]

Спасибо за репорт, обязательно посмотрю. Сори за время ответа)

[ghost]

И Вам спасибо, для меня самый подходящий скролл оказался.

Я нашел причину, при загрузке страницы/плагина по умолчанию существует вот такой блок и он как раз создает видимые артефакты, я придал ему теней для наглядности

Это блок, у которого по умолчанию получается есть высота из-за overflow-y: scroll; .baron__scroller{overflow-y: scroll;}

Я на js скрыл его в display:none

[Diokuz]

Можно ещё .scroller:empty { display: none }.

Но в целом странно. Получается лиса просвечивает какую-то полоску сквозь overflow: hidden. Очень странно.

[alexanderzobnin]

Да, в Firefox наблюдаю тоже самое.

[Diokuz]

@alexanderzobnin @akuchkovsky можете выполнить вот этот скрипт в консоли браузера, в тот момент, когда появляется проблема, и запостить результат сюда?

!function(){console.group("Baron diagnosis");var o=document.querySelectorAll("[data-baron-v-id]");console.log("Total barons found: ",o.length),o.forEach(function(o,t){var e=o.children[0];console.group("Baron root "+t),console.log("Root: ",o),console.log("Maybe scroller: ",e),console.log("Root data: ",{scrollHeight:o.scrollHeight,offsetHeight:o.offsetHeight,overflow:o.style.overflow,clientWidth:o.clientWidth,offsetWidth:o.offsetWidth}),console.log("Scroller data: ",{scrollHeight:e.scrollHeight,offsetHeight:e.offsetHeight,clientWidth:e.clientWidth,offsetWidth:e.offsetWidth}),console.groupEnd()})}();

[alexanderzobnin]

Baron diagnosis debugger eval code:1:13
Total barons found:  9 debugger eval code:1:99

Baron root 0 debugger eval code:1:188
Root:  
<div class="main-view baron baron__root" style="overflow: hidden;" data-baron-v-id="0">
debugger eval code:1:219
Maybe scroller:  
<div class="scroll-canvas baron__scroller" grafana-scrollbar="" style="overflow-y: scroll; box-sizing: border-box; margin: 0px; border: 0px none; width: 945px; min-width: 945px; max-width: 945px;">
debugger eval code:1:243
Root data:  
Object { scrollHeight: 1054, offsetHeight: 1054, overflow: "hidden", clientWidth: 937, offsetWidth: 937 }
debugger eval code:1:277
Scroller data:  
Object { scrollHeight: 1054, offsetHeight: 1054, clientWidth: 937, offsetWidth: 945 }
debugger eval code:1:440

Baron root 1 debugger eval code:1:188
Root:  
<div class="scroll-canvas scroll-canvas--dashboard baron baron__root _scrollbar" style="overflow: hidden;" data-baron-v-id="1">
debugger eval code:1:219
Maybe scroller:  
<div class="baron__scroller" grafana-scrollbar="" style="overflow-y: scroll; box-sizing: border-box; margin: 0px; border: 0px none; width: 945px; min-width: 945px; max-width: 945px;">
debugger eval code:1:243
Root data:  
Object { scrollHeight: 998, offsetHeight: 998, overflow: "hidden", clientWidth: 937, offsetWidth: 937 }
debugger eval code:1:277
Scroller data:  
Object { scrollHeight: 2520, offsetHeight: 998, clientWidth: 937, offsetWidth: 945 }
debugger eval code:1:440

Baron root 2 debugger eval code:1:188
Root:  
<div class="panel-content baron baron__root baron__clipper panel-content--scrollable" style="height: 201px;" data-baron-v-id="2">
debugger eval code:1:219
Maybe scroller:  
<ng-transclude class="panel-height-helper" style="overflow: hidden;">
debugger eval code:1:243
Root data:  
Object { scrollHeight: 201, offsetHeight: 201, overflow: "", clientWidth: 213, offsetWidth: 213 }
debugger eval code:1:277
Scroller data:  
Object { scrollHeight: 196, offsetHeight: 196, clientWidth: 193, offsetWidth: 193 }
debugger eval code:1:440

Baron root 3 debugger eval code:1:188
Root:  
<div class="graph-legend-content graph-legend-table baron baron__root _scrollbar" graph-legend="" style="overflow: hidden;" data-baron-v-id="40">
debugger eval code:1:219
Maybe scroller:  
<div class="graph-legend-scroll baron__scroller" style="overflow-y: scroll; box-sizing: border-box; margin: 0px; border: 0px none; width: 428px; min-width: 428px; max-width: 428px;">
debugger eval code:1:243
Root data:  
Object { scrollHeight: 125, offsetHeight: 125, overflow: "hidden", clientWidth: 420, offsetWidth: 420 }
debugger eval code:1:277
Scroller data:  
Object { scrollHeight: 204, offsetHeight: 125, clientWidth: 420, offsetWidth: 428 }
debugger eval code:1:440

Baron root 4 debugger eval code:1:188
Root:  
<div class="graph-legend-content graph-legend-table baron baron__root _scrollbar" graph-legend="" style="overflow: hidden;" data-baron-v-id="42">
debugger eval code:1:219
Maybe scroller:  
<div class="graph-legend-scroll baron__scroller" style="overflow-y: scroll; box-sizing: border-box; margin: 0px; border: 0px none; width: 428px; min-width: 428px; max-width: 428px;">
debugger eval code:1:243
Root data:  
Object { scrollHeight: 125, offsetHeight: 125, overflow: "hidden", clientWidth: 420, offsetWidth: 420 }
debugger eval code:1:277
Scroller data:  
Object { scrollHeight: 204, offsetHeight: 125, clientWidth: 420, offsetWidth: 428 }
debugger eval code:1:440

Baron root 5 debugger eval code:1:188
Root:  
<div class="graph-legend-content graph-legend-table baron baron__root _scrollbar" graph-legend="" style="overflow: hidden;" data-baron-v-id="44">
debugger eval code:1:219
Maybe scroller:  
<div class="graph-legend-scroll baron__scroller" style="overflow-y: scroll; box-sizing: border-box; margin: 0px; border: 0px none; width: 428px; min-width: 428px; max-width: 428px;">
debugger eval code:1:243
Root data:  
Object { scrollHeight: 125, offsetHeight: 125, overflow: "hidden", clientWidth: 420, offsetWidth: 420 }
debugger eval code:1:277
Scroller data:  
Object { scrollHeight: 348, offsetHeight: 125, clientWidth: 420, offsetWidth: 428 }
debugger eval code:1:440

Baron root 6 debugger eval code:1:188
Root:  
<div class="graph-legend-content graph-legend-table baron baron__root" graph-legend="" style="overflow: hidden;" data-baron-v-id="46">
debugger eval code:1:219
Maybe scroller:  
<div class="graph-legend-scroll baron__scroller" style="overflow-y: scroll; box-sizing: border-box; margin: 0px; border: 0px none; width: 428px; min-width: 428px; max-width: 428px;">
debugger eval code:1:243
Root data:  
Object { scrollHeight: 101, offsetHeight: 101, overflow: "hidden", clientWidth: 420, offsetWidth: 420 }
debugger eval code:1:277
Scroller data:  
Object { scrollHeight: 101, offsetHeight: 101, clientWidth: 420, offsetWidth: 428 }
debugger eval code:1:440

Baron root 7 debugger eval code:1:188
Root:  
<div class="graph-legend-content graph-legend-table baron baron__root" graph-legend="" style="overflow: hidden;" data-baron-v-id="48">
debugger eval code:1:219
Maybe scroller:  
<div class="graph-legend-scroll baron__scroller" style="overflow-y: scroll; box-sizing: border-box; margin: 0px; border: 0px none; width: 428px; min-width: 428px; max-width: 428px;">
debugger eval code:1:243
Root data:  
Object { scrollHeight: 60, offsetHeight: 60, overflow: "hidden", clientWidth: 420, offsetWidth: 420 }
debugger eval code:1:277
Scroller data:  
Object { scrollHeight: 60, offsetHeight: 60, clientWidth: 420, offsetWidth: 428 }
debugger eval code:1:440

Baron root 8 debugger eval code:1:188
Root:  
<div class="graph-legend-content graph-legend-table baron baron__root" graph-legend="" style="overflow: hidden;" data-baron-v-id="50">
debugger eval code:1:219
Maybe scroller:  
<div class="graph-legend-scroll baron__scroller" style="overflow-y: scroll; box-sizing: border-box; margin: 0px; border: 0px none; width: 428px; min-width: 428px; max-width: 428px;">
debugger eval code:1:243
Root data:  
Object { scrollHeight: 39, offsetHeight: 39, overflow: "hidden", clientWidth: 420, offsetWidth: 420 }
debugger eval code:1:277
Scroller data:  
Object { scrollHeight: 39, offsetHeight: 39, clientWidth: 420, offsetWidth: 428 }
debugger eval code:1:440
true