Привет всем, я использовал простую библиотеку панелей для создания собственной полосы прокрутки. Я пробовал использовать простой css, как описано здесь . Но он не был виден в iphone версии программного обеспечения 13. Поэтому я попытался использовать библиотеку simpleBar.
Но сейчас я вижу две полосы прокрутки, одну по умолчанию и другую пользовательскую. Я не могу этого понять, есть ли способ получить то, что я пытаюсь сделать.
Вот ссылка codepen . Может кто-нибудь помочь мне здесь? мой html:
<!DOCTYPE html>
<html>
<head>
<title>scroll</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/simplebar@latest/dist/simplebar.css"
/>
<script src="https://cdn.jsdelivr.net/npm/simplebar@latest/dist/simplebar.min.js"></script>
</head>
<body>
<div id="simple-bar" class="mydiv">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed tempor and vitality, so that the labor and sorrow, some important things to do eiusmod. Over the years, I will come, who will nostrud aliquip out of her the advantage of exercise, so that stimulus efforts if the school district and longevity. Want to be a pain in the cupidatat cillum has been criticized in the Duis et dolore magna flee produces no resultant pleasure. Excepteur cupidatat blacks are not excepteur, is soothing to the soul, that is, they deserted the general duties of those who are to blame for your troubles. Chat price developers tank. No clinical pregnant by hardware. Nullam varius not, for filthy and take advantage of the quiver, est eros bibendum elit, sollicitudin mauris nec luctus big cat. Integer mauris nibh Performance pregnant. And the laughter of vulputate vehicula Duis ac tellus. Carton until laughter from the developer. Even time. To notebook, Reserved football at Planning, peanut Performance is ugly, that tincidunt than a smile. Maecenas, my warm-up photography. Until fermentation. Malesuada any of my kids. Duis sapien sem, aliquet nec, commodo eget, adipiscing sed, neither. Some jaws developer that has been bananas, football players undergraduate sapien, but entrepreneurs need to malesuada diam. Tomorrow soft chocolate now. No alcohol. The latest development. Curabitur augue lorem, dapibus quis, laoreet dictum, the price and, unless the. Aenean magna nisl, mollis quis, molestie eu, feugiat in, bored. The refinancing. only. Aenean magna nisl, mollis quis, molestie eu, feugiat in, bored. The refinancing. only. Aenean magna nisl, mollis quis, molestie eu, feugiat in, bored. The refinancing.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed tempor and vitality, so that the labor and sorrow, some important things to do eiusmod. Over the years, I will come, who will nostrud aliquip out of her the advantage of exercise, so that stimulus efforts if the school district and longevity. Want to be a pain in the cupidatat cillum has been criticized in the Duis et dolore magna flee produces no resultant pleasure. Excepteur cupidatat blacks are not excepteur, is soothing to the soul, that is, they deserted the general duties of those who are to blame for your troubles. Chat price developers tank. No clinical pregnant by hardware. Nullam varius not, for filthy and take advantage of the quiver, est eros bibendum elit, sollicitudin mauris nec luctus big cat. Integer mauris nibh Performance pregnant. And the laughter of vulputate vehicula Duis ac tellus. Carton until laughter from the developer. Even time. To notebook, Reserved football at Planning, peanut Performance is ugly, that tincidunt than a smile. Maecenas, my warm-up photography. Until fermentation. Malesuada any of my kids. Duis sapien sem, aliquet nec, commodo eget, adipiscing sed, neither. Some jaws developer that has been bananas, football players undergraduate sapien, but entrepreneurs need to malesuada diam. Tomorrow soft chocolate now. No alcohol. The latest development. Curabitur augue lorem, dapibus quis, laoreet dictum, the price and, unless the. Aenean magna nisl, mollis quis, molestie eu, feugiat in, bored. The refinancing. only. Aenean magna nisl, mollis quis, molestie eu, feugiat in, bored. The refinancing. only. Aenean magna nisl, mollis quis, molestie eu, feugiat in, bored. The refinancing.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed tempor and vitality, so that the labor and sorrow, some important things to do eiusmod. Over the years, I will come, who will nostrud aliquip out of her the advantage of exercise, so that stimulus efforts if the school district and longevity. Want to be a pain in the cupidatat cillum has been criticized in the Duis et dolore magna flee produces no resultant pleasure. Excepteur cupidatat blacks are not excepteur, is soothing to the soul, that is, they deserted the general duties of those who are to blame for your troubles. Chat price developers tank. No clinical pregnant by hardware. Nullam varius not, for filthy and take advantage of the quiver, est eros bibendum elit, sollicitudin mauris nec luctus big cat. Integer mauris nibh Performance pregnant. And the laughter of vulputate vehicula Duis ac tellus. Carton until laughter from the developer. Even time. To notebook, Reserved football at Planning, peanut Performance is ugly, that tincidunt than a smile. Maecenas, my warm-up photography. Until fermentation. Malesuada any of my kids. Duis sapien sem, aliquet nec, commodo eget, adipiscing sed, neither. Some jaws developer that has been bananas, football players undergraduate sapien, but entrepreneurs need to malesuada diam. Tomorrow soft chocolate now. No alcohol. The latest development. Curabitur augue lorem, dapibus quis, laoreet dictum, the price and, unless the. Aenean magna nisl, mollis quis, molestie eu, feugiat in, bored. The refinancing. only. Aenean magna nisl, mollis quis, molestie eu, feugiat in, bored. The refinancing. only. Aenean magna nisl, mollis quis, molestie eu, feugiat in, bored. The refinancing.
</p>
</div>
</body>
</html>
вот мой css:
.mydiv{
width:250px;
height:300px;
/*border: 1px solid #ccc;*/
border-radius:5px;
/*box-shadow: 0 0 10px rgba(0,0,0,.2);*/
padding: 15px;
overflow: auto;
/*background: red;*/
}
.simplebar-scrollbar::before{
background-color:red !important;
opacity:1 !important;
margin-top: -2px;
bottom:-3px !important;
}
.simplebar-track.simplebar-vertical{
background: url('https://i.imgur.com/GvV1R30.png') repeat-y center;
background-size: 3px;
}
и js:
var myElement = document.getElementById('simple-bar');
new SimpleBar(myElement, { autoHide: false });