Сейчас я работаю над созданием макета веб-сайта, который будет похож на рабочий стол Window95 с окном Paint в качестве главного окна для контента, и я пытаюсь закончить последний (по крайней мере, я надеюсь, что это последний...) элемент JavaScript, и я действительно НЕ ИМЕЮ ни малейшего понятия, что я делаю. Я хочу, чтобы прокручиваемая часть полосы прокрутки, которую я сделал, ну... прокручивалась. У меня есть кнопки для этого, которые работают просто отлично, но фактическая прокручиваемая часть — это другая история. Думаю, мне нужно использовать события мыши (mouseup, mousedown и mousemove), что-то для аспекта колеса, а также заставить полосу прокрутки перемещать фактическое содержимое так, как это делает обычная полоса прокрутки, но я не понимаю, как это работает :( Я перебрал ДЕСЯТКИ различных поисковых запросов, чтобы попытаться найти похожую проблему, но я просто не думаю, что большинство людей хотят создавать пользовательские полосы прокрутки, поэтому я не нашел НИЧЕГО, что могло бы мне помочь.
Я вообще не знаю JavaScript и действительно, очень сильно пытаюсь заставить то, что я хочу, работать.
У меня есть codepen здесь, показывающий мой макет до сих пор, так что я надеюсь, вы можете увидеть, с чем я работаю. Ни один из моих скриптов, похоже, не работает по ссылке, и я не уверен, почему, но поскольку У меня пока нет скрипта, который я бы попробовал, может, это не так уж важно?
Я задал этот вопрос на Reddit и получил много ответов о создании пользовательского курсора с использованием scrollbar-color и scrollbar-width, но, если говорить точнее, это не решает мою проблему. Я хочу использовать JavaScript, чтобы заставить div прокручиваться вверх и вниз, при этом он также перемещает содержимое при прокрутке. Я введу ниже code своего codeа для полосы прокрутки и ее прямого родителя, который я пытаюсь создать.
Любая помощь будет высоко оценена!!!
Я пробовал несколько разных перетаскиваемых скриптов, но ни один из них не делает то, что мне нужно, поскольку мне нужен не простой перетаскиваемый скрипт, а тот, в котором перетаскиваемый объект также прокручивает текстовое поле, которое я создал.
.scrollbarvertical {
display: block;
position: absolute;
float: right;
width: 16px;
height: calc(100% - 18px);
top: 2px;
right: 1px;
border-bottom: black 1px solid;
background-color: #bdbebd;
background-image: url("https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/transparent%20bg.gif");
}
.buttonscrollbarupdown {
display: inline-block;
position: relative;
width: 16px;
background-color: #bdbebd;
border-left: #dedfde 1px solid;
border-right: black 1px solid;
border-bottom: black 1px solid;
border-top: black 1px solid;
text-align: center;
left: 0;
top: -1px;
box-shadow: inset 0 1px 0 0 white, inset 1px 0 0 0 white, inset 0 -1px 0 0 #7b7b7b, inset -1px 0 0 0 #7b7b7b;
}