С учетом предоставленных вами данных, это решение предлагает вам индивидуальную настройку для вашей знаменитой пользовательской полосы прокрутки. Это решение обеспечивает совместимость браузера. Это решение предлагает только css или Css + jS обратный вызов
Обнаружены проблемы в вашем коде Вы хотите, чтобы он был совместим с браузером на 100%, но используете спецификацию c Webkit Css? По умолчанию полосы прокрутки занимают +/- 20 пикселей от области просмотра, которую обычно необходимо учитывать? Вот почему содержимое перемещается, когда вы показываете / скрываете полосы прокрутки по умолчанию. Это не ошибка, это особенность. Только на мобильном телефоне стандартная прокрутка над содержимым.
Таким образом, чтобы удовлетворить ваши требования. Вот что вам нужно сделать, использовать платформу, которая учитывает множественные предостережения разных браузеров, если нет, то вы будете постоянно настраивать Javascript и Css, чтобы протестировать его в новом браузере. В этом случае здесь я буду использовать SimpleBar, чтобы позволить вам настройку и использовать Jquery, чтобы вызвать SimpleBar Into Action и установить тайм-аут на «2000» миллисекунд. Это будет работать в современном браузере «100% времени».
Simplebar https://github.com/Grsmto/simplebar/tree/master/packages/simplebar
Рабочий JSfiddle https://jsfiddle.net/ft9h210g/12/
HTML
<head>
<link rel="stylesheet" href="https://unpkg.com/simplebar@latest/dist/simplebar.css" />
</head>
<body>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script src="https://unpkg.com/simplebar@latest/dist/simplebar.min.js"></script>
<div id="horizontalcontainer">
<div id="scrolling-wrapper">
<div class="videocard1">
<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://www.youtube.com/embed/_OBlgSz8sSM" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
</div>
<div class="videocard">
<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://www.youtube.com/embed/_OBlgSz8sSM" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
</div>
<div class="videocard">
<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://www.youtube.com/embed/_OBlgSz8sSM" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
</div>
<div class="videocardlast">
<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://www.youtube.com/embed/_OBlgSz8sSM" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
</div>
</div>
</div>
</body>
JS
const simplebar = new SimpleBar(document.querySelector('#scrolling-wrapper'), {
autoHide: true,
timeout: 2000
});
css
.hidden {
display: none;
}
#container {
width: 200px;
}
#scrollable {
height: 200px;
}
.simplebar {
position: relative;
z-index: 0;
overflow: hidden;
-webkit-overflow-scrolling: touch;
}
::-webkit-scrollbar {
height: 1%;
display: var(--scroll-display);
}
:root {
--scroll-display: none;
}
#horizontalcontainer {
z-index: 0;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
/*
height: 100%;
*/
height: 400px;
display: flex;
align-items: center;
}
#scrolling-wrapper {
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
text-align: center;
margin: 0 auto;
height: 250px;
width: 100vw;
/*
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
*/
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.videocard1 {
padding-left: 27%;
padding-right: 2.5%;
display: inline-block;
position: relative;
width: 46.5%;
/* top: 50%;
transform: translateY(-50%); */
}
.videocard {
padding-right: 2.5%;
display: inline-block;
position: relative;
width: 46.5%;
/* top: 50%;
transform: translateY(-50%); */
}
.videocardlast {
padding-right: 27%;
display: inline-block;
position: relative;
width: 46.5%;
/* top:0%;
transform: translateY(-50%); */
}
Я изменил оригинал css Чтобы показать, где может отображаться горизонтальная прокрутка, например:
#horizontalcontainer {
/*
height: 100%; //show at the bottom
*/
height: 400px; //show after 400px
}
, но Вы можете изменить его по вкусу вашего проекта. Вы можете использовать Jquery и Simplebar из CDN или переместить файлы CSS + JS в свой проект, чтобы настроить полосу прокрутки, необходимую для загрузки простой панели. css и / или перезаписать свойства css simplebar. css со своими настройками.