Created
May 12, 2024 22:49
-
-
Save EncodeTheCode/5c70db3b8ee45bc255d97aae5a7e068f to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Custom Scrollbar</title> | |
| <style> | |
| .scroll-box { | |
| position: relative; | |
| /* border-right: 1px solid #000; */ | |
| width: 902px; /* Adjust to fit your design, 902px is default */ | |
| height: 856px; /* Adjust to fit your design */ | |
| overflow: hidden; | |
| } | |
| .content { | |
| width: calc(100% - 10px); /* Adjust for scrollbar width */ | |
| height: auto; | |
| overflow: hidden; | |
| padding-right: 10px; /* Adjust for scrollbar width */ | |
| } | |
| .scrollbar { | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| width: 290px; | |
| height: 384%; | |
| background-color: lightgray; | |
| user-select: none; /* Prevent text selection */ | |
| } | |
| .scrollbar-thumb { | |
| position: absolute; | |
| width: 100%; | |
| background-color: gray; | |
| background-image: url('https://www.256content.com/hs-fs/hubfs/Imported_Blog_Media/tumblr_mimi12jHA01ruaoizo1_500.gif?width=312&height=331&name=tumblr_mimi12jHA01ruaoizo1_500.gif'); | |
| cursor: pointer; | |
| user-select: none; /* Prevent text selection */ | |
| box-shadow: 0px -1px #000, 0px 1px #000, 0px -2px #888, 0px 2px #888; | |
| } | |
| button { | |
| position: absolute; | |
| width: calc(100% - 10px); /* Adjust for scrollbar width */ | |
| } | |
| .scroll-up { | |
| top: 0; | |
| width: calc(100% - 24px); | |
| } | |
| .scroll-down { | |
| bottom: 0; | |
| width: calc(100% - 24px); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="scroll-box"> | |
| <div class="content"> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel lectus luctus, convallis purus in, tincidunt eros. In hac habitasse platea dictumst. Nam vestibulum eleifend dolor, vel suscipit neque tempor eu. Vivamus condimentum sed enim nec tincidunt. Fusce rhoncus magna quis risus posuere vestibulum. Aliquam non turpis eu felis convallis tincidunt ut nec lectus. Nulla facilisi. Nulla ac pharetra velit, in consectetur eros. Fusce commodo, dolor eget bibendum aliquam, arcu lectus lacinia risus, nec viverra dolor justo a lorem. Praesent non elit magna. Sed sit amet libero a mauris dictum rutrum id sit amet nisl. Vestibulum eu lorem ex. | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel lectus luctus, convallis purus in, tincidunt eros. In hac habitasse platea dictumst. Nam vestibulum eleifend dolor, vel suscipit neque tempor eu. Vivamus condimentum sed enim nec tincidunt. Fusce rhoncus magna quis risus posuere vestibulum. Aliquam non turpis eu felis convallis tincidunt ut nec lectus. Nulla facilisi. Nulla ac pharetra velit, in consectetur eros. Fusce commodo, dolor eget bibendum aliquam, arcu lectus lacinia risus, nec viverra dolor justo a lorem. Praesent non elit magna. Sed sit amet libero a mauris dictum rutrum id sit amet nisl. Vestibulum eu lorem ex. | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel lectus luctus, convallis purus in, tincidunt eros. In hac habitasse platea dictumst. Nam vestibulum eleifend dolor, vel suscipit neque tempor eu. Vivamus condimentum sed enim nec tincidunt. Fusce rhoncus magna quis risus posuere vestibulum. Aliquam non turpis eu felis convallis tincidunt ut nec lectus. Nulla facilisi. Nulla ac pharetra velit, in consectetur eros. Fusce commodo, dolor eget bibendum aliquam, arcu lectus lacinia risus, nec viverra dolor justo a lorem. Praesent non elit magna. Sed sit amet libero a mauris dictum rutrum id sit amet nisl. Vestibulum eu lorem ex. | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel lectus luctus, convallis purus in, tincidunt eros. In hac habitasse platea dictumst. Nam vestibulum eleifend dolor, vel suscipit neque tempor eu. Vivamus condimentum sed enim nec tincidunt. Fusce rhoncus magna quis risus posuere vestibulum. Aliquam non turpis eu felis convallis tincidunt ut nec lectus. Nulla facilisi. Nulla ac pharetra velit, in consectetur eros. Fusce commodo, dolor eget bibendum aliquam, arcu lectus lacinia risus, nec viverra dolor justo a lorem. Praesent non elit magna. Sed sit amet libero a mauris dictum rutrum id sit amet nisl. Vestibulum eu lorem ex. | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel lectus luctus, convallis purus in, tincidunt eros. In hac habitasse platea dictumst. Nam vestibulum eleifend dolor, vel suscipit neque tempor eu. Vivamus condimentum sed enim nec tincidunt. Fusce rhoncus magna quis risus posuere vestibulum. Aliquam non turpis eu felis convallis tincidunt ut nec lectus. Nulla facilisi. Nulla ac pharetra velit, in consectetur eros. Fusce commodo, dolor eget bibendum aliquam, arcu lectus lacinia risus, nec viverra dolor justo a lorem. Praesent non elit magna. Sed sit amet libero a mauris dictum rutrum id sit amet nisl. Vestibulum eu lorem ex. | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel lectus luctus, convallis purus in, tincidunt eros. In hac habitasse platea dictumst. Nam vestibulum eleifend dolor, vel suscipit neque tempor eu. Vivamus condimentum sed enim nec tincidunt. Fusce rhoncus magna quis risus posuere vestibulum. Aliquam non turpis eu felis convallis tincidunt ut nec lectus. Nulla facilisi. Nulla ac pharetra velit, in consectetur eros. Fusce commodo, dolor eget bibendum aliquam, arcu lectus lacinia risus, nec viverra dolor justo a lorem. Praesent non elit magna. Sed sit amet libero a mauris dictum rutrum id sit amet nisl. Vestibulum eu lorem ex. | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel lectus luctus, convallis purus in, tincidunt eros. In hac habitasse platea dictumst. Nam vestibulum eleifend dolor, vel suscipit neque tempor eu. Vivamus condimentum sed enim nec tincidunt. Fusce rhoncus magna quis risus posuere vestibulum. Aliquam non turpis eu felis convallis tincidunt ut nec lectus. Nulla facilisi. Nulla ac pharetra velit, in consectetur eros. Fusce commodo, dolor eget bibendum aliquam, arcu lectus lacinia risus, nec viverra dolor justo a lorem. Praesent non elit magna. Sed sit amet libero a mauris dictum rutrum id sit amet nisl. Vestibulum eu lorem ex. | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel lectus luctus, convallis purus in, tincidunt eros. In hac habitasse platea dictumst. Nam vestibulum eleifend dolor, vel suscipit neque tempor eu. Vivamus condimentum sed enim nec tincidunt. Fusce rhoncus magna quis risus posuere vestibulum. Aliquam non turpis eu felis convallis tincidunt ut nec lectus. Nulla facilisi. Nulla ac pharetra velit, in consectetur eros. Fusce commodo, dolor eget bibendum aliquam, arcu lectus lacinia risus, nec viverra dolor justo a lorem. Praesent non elit magna. Sed sit amet libero a mauris dictum rutrum id sit amet nisl. Vestibulum eu lorem ex. | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel lectus luctus, convallis purus in, tincidunt eros. In hac habitasse platea dictumst. Nam vestibulum eleifend dolor, vel suscipit neque tempor eu. Vivamus condimentum sed enim nec tincidunt. Fusce rhoncus magna quis risus posuere vestibulum. Aliquam non turpis eu felis convallis tincidunt ut nec lectus. Nulla facilisi. Nulla ac pharetra velit, in consectetur eros. Fusce commodo, dolor eget bibendum aliquam, arcu lectus lacinia risus, nec viverra dolor justo a lorem. Praesent non elit magna. Sed sit amet libero a mauris dictum rutrum id sit amet nisl. Vestibulum eu lorem ex. | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel lectus luctus, convallis purus in, tincidunt eros. In hac habitasse platea dictumst. Nam vestibulum eleifend dolor, vel suscipit neque tempor eu. Vivamus condimentum sed enim nec tincidunt. Fusce rhoncus magna quis risus posuere vestibulum. Aliquam non turpis eu felis convallis tincidunt ut nec lectus. Nulla facilisi. Nulla ac pharetra velit, in consectetur eros. Fusce commodo, dolor eget bibendum aliquam, arcu lectus lacinia risus, nec viverra dolor justo a lorem. Praesent non elit magna. Sed sit amet libero a mauris dictum rutrum id sit amet nisl. Vestibulum eu lorem ex. | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel lectus luctus, convallis purus in, tincidunt eros. In hac habitasse platea dictumst. Nam vestibulum eleifend dolor, vel suscipit neque tempor eu. Vivamus condimentum sed enim nec tincidunt. Fusce rhoncus magna quis risus posuere vestibulum. Aliquam non turpis eu felis convallis tincidunt ut nec lectus. Nulla facilisi. Nulla ac pharetra velit, in consectetur eros. Fusce commodo, dolor eget bibendum aliquam, arcu lectus lacinia risus, nec viverra dolor justo a lorem. Praesent non elit magna. Sed sit amet libero a mauris dictum rutrum id sit amet nisl. Vestibulum eu lorem ex. | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel lectus luctus, convallis purus in, tincidunt eros. In hac habitasse platea dictumst. Nam vestibulum eleifend dolor, vel suscipit neque tempor eu. Vivamus condimentum sed enim nec tincidunt. Fusce rhoncus magna quis risus posuere vestibulum. Aliquam non turpis eu felis convallis tincidunt ut nec lectus. Nulla facilisi. Nulla ac pharetra velit, in consectetur eros. Fusce commodo, dolor eget bibendum aliquam, arcu lectus lacinia risus, nec viverra dolor justo a lorem. Praesent non elit magna. Sed sit amet libero a mauris dictum rutrum id sit amet nisl. Vestibulum eu lorem ex. | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel lectus luctus, convallis purus in, tincidunt eros. In hac habitasse platea dictumst. Nam vestibulum eleifend dolor, vel suscipit neque tempor eu. Vivamus condimentum sed enim nec tincidunt. Fusce rhoncus magna quis risus posuere vestibulum. Aliquam non turpis eu felis convallis tincidunt ut nec lectus. Nulla facilisi. Nulla ac pharetra velit, in consectetur eros. Fusce commodo, dolor eget bibendum aliquam, arcu lectus lacinia risus, nec viverra dolor justo a lorem. Praesent non elit magna. Sed sit amet libero a mauris dictum rutrum id sit amet nisl. Vestibulum eu lorem ex. | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel lectus luctus, convallis purus in, tincidunt eros. In hac habitasse platea dictumst. Nam vestibulum eleifend dolor, vel suscipit neque tempor eu. Vivamus condimentum sed enim nec tincidunt. Fusce rhoncus magna quis risus posuere vestibulum. Aliquam non turpis eu felis convallis tincidunt ut nec lectus. Nulla facilisi. Nulla ac pharetra velit, in consectetur eros. Fusce commodo, dolor eget bibendum aliquam, arcu lectus lacinia risus, nec viverra dolor justo a lorem. Praesent non elit magna. Sed sit amet libero a mauris dictum rutrum id sit amet nisl. Vestibulum eu lorem ex. | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel lectus luctus, convallis purus in, tincidunt eros. In hac habitasse platea dictumst. Nam vestibulum eleifend dolor, vel suscipit neque tempor eu. Vivamus condimentum sed enim nec tincidunt. Fusce rhoncus magna quis risus posuere vestibulum. Aliquam non turpis eu felis convallis tincidunt ut nec lectus. Nulla facilisi. Nulla ac pharetra velit, in consectetur eros. Fusce commodo, dolor eget bibendum aliquam, arcu lectus lacinia risus, nec viverra dolor justo a lorem. Praesent non elit magna. Sed sit amet libero a mauris dictum rutrum id sit amet nisl. Vestibulum eu lorem ex. | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel lectus luctus, convallis purus in, tincidunt eros. In hac habitasse platea dictumst. Nam vestibulum eleifend dolor, vel suscipit neque tempor eu. Vivamus condimentum sed enim nec tincidunt. Fusce rhoncus magna quis risus posuere vestibulum. Aliquam non turpis eu felis convallis tincidunt ut nec lectus. Nulla facilisi. Nulla ac pharetra velit, in consectetur eros. Fusce commodo, dolor eget bibendum aliquam, arcu lectus lacinia risus, nec viverra dolor justo a lorem. Praesent non elit magna. Sed sit amet libero a mauris dictum rutrum id sit amet nisl. Vestibulum eu lorem ex. | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel lectus luctus, convallis purus in, tincidunt eros. In hac habitasse platea dictumst. Nam vestibulum eleifend dolor, vel suscipit neque tempor eu. Vivamus condimentum sed enim nec tincidunt. Fusce rhoncus magna quis risus posuere vestibulum. Aliquam non turpis eu felis convallis tincidunt ut nec lectus. Nulla facilisi. Nulla ac pharetra velit, in consectetur eros. Fusce commodo, dolor eget bibendum aliquam, arcu lectus lacinia risus, nec viverra dolor justo a lorem. Praesent non elit magna. Sed sit amet libero a mauris dictum rutrum id sit amet nisl. Vestibulum eu lorem ex. | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel lectus luctus, convallis purus in, tincidunt eros. In hac habitasse platea dictumst. Nam vestibulum eleifend dolor, vel suscipit neque tempor eu. Vivamus condimentum sed enim nec tincidunt. Fusce rhoncus magna quis risus posuere vestibulum. Aliquam non turpis eu felis convallis tincidunt ut nec lectus. Nulla facilisi. Nulla ac pharetra velit, in consectetur eros. Fusce commodo, dolor eget bibendum aliquam, arcu lectus lacinia risus, nec viverra dolor justo a lorem. Praesent non elit magna. Sed sit amet libero a mauris dictum rutrum id sit amet nisl. Vestibulum eu lorem ex. | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel lectus luctus, convallis purus in, tincidunt eros. In hac habitasse platea dictumst. Nam vestibulum eleifend dolor, vel suscipit neque tempor eu. Vivamus condimentum sed enim nec tincidunt. Fusce rhoncus magna quis risus posuere vestibulum. Aliquam non turpis eu felis convallis tincidunt ut nec lectus. Nulla facilisi. Nulla ac pharetra velit, in consectetur eros. Fusce commodo, dolor eget bibendum aliquam, arcu lectus lacinia risus, nec viverra dolor justo a lorem. Praesent non elit magna. Sed sit amet libero a mauris dictum rutrum id sit amet nisl. Vestibulum eu lorem ex. | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel lectus luctus, convallis purus in, tincidunt eros. In hac habitasse platea dictumst. Nam vestibulum eleifend dolor, vel suscipit neque tempor eu. Vivamus condimentum sed enim nec tincidunt. Fusce rhoncus magna quis risus posuere vestibulum. Aliquam non turpis eu felis convallis tincidunt ut nec lectus. Nulla facilisi. Nulla ac pharetra velit, in consectetur eros. Fusce commodo, dolor eget bibendum aliquam, arcu lectus lacinia risus, nec viverra dolor justo a lorem. Praesent non elit magna. Sed sit amet libero a mauris dictum rutrum id sit amet nisl. Vestibulum eu lorem ex. | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel lectus luctus, convallis purus in, tincidunt eros. In hac habitasse platea dictumst. Nam vestibulum eleifend dolor, vel suscipit neque tempor eu. Vivamus condimentum sed enim nec tincidunt. Fusce rhoncus magna quis risus posuere vestibulum. Aliquam non turpis eu felis convallis tincidunt ut nec lectus. Nulla facilisi. Nulla ac pharetra velit, in consectetur eros. Fusce commodo, dolor eget bibendum aliquam, arcu lectus lacinia risus, nec viverra dolor justo a lorem. Praesent non elit magna. Sed sit amet libero a mauris dictum rutrum id sit amet nisl. Vestibulum eu lorem ex. | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel lectus luctus, convallis purus in, tincidunt eros. In hac habitasse platea dictumst. Nam vestibulum eleifend dolor, vel suscipit neque tempor eu. Vivamus condimentum sed enim nec tincidunt. Fusce rhoncus magna quis risus posuere vestibulum. Aliquam non turpis eu felis convallis tincidunt ut nec lectus. Nulla facilisi. Nulla ac pharetra velit, in consectetur eros. Fusce commodo, dolor eget bibendum aliquam, arcu lectus lacinia risus, nec viverra dolor justo a lorem. Praesent non elit magna. Sed sit amet libero a mauris dictum rutrum id sit amet nisl. Vestibulum eu lorem ex. | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel lectus luctus, convallis purus in, tincidunt eros. In hac habitasse platea dictumst. Nam vestibulum eleifend dolor, vel suscipit neque tempor eu. Vivamus condimentum sed enim nec tincidunt. Fusce rhoncus magna quis risus posuere vestibulum. Aliquam non turpis eu felis convallis tincidunt ut nec lectus. Nulla facilisi. Nulla ac pharetra velit, in consectetur eros. Fusce commodo, dolor eget bibendum aliquam, arcu lectus lacinia risus, nec viverra dolor justo a lorem. Praesent non elit magna. Sed sit amet libero a mauris dictum rutrum id sit amet nisl. Vestibulum eu lorem ex. | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel lectus luctus, convallis purus in, tincidunt eros. In hac habitasse platea dictumst. Nam vestibulum eleifend dolor, vel suscipit neque tempor eu. Vivamus condimentum sed enim nec tincidunt. Fusce rhoncus magna quis risus posuere vestibulum. Aliquam non turpis eu felis convallis tincidunt ut nec lectus. Nulla facilisi. Nulla ac pharetra velit, in consectetur eros. Fusce commodo, dolor eget bibendum aliquam, arcu lectus lacinia risus, nec viverra dolor justo a lorem. Praesent non elit magna. Sed sit amet libero a mauris dictum rutrum id sit amet nisl. Vestibulum eu lorem ex. | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel lectus luctus, convallis purus in, tincidunt eros. In hac habitasse platea dictumst. Nam vestibulum eleifend dolor, vel suscipit neque tempor eu. Vivamus condimentum sed enim nec tincidunt. Fusce rhoncus magna quis risus posuere vestibulum. Aliquam non turpis eu felis convallis tincidunt ut nec lectus. Nulla facilisi. Nulla ac pharetra velit, in consectetur eros. Fusce commodo, dolor eget bibendum aliquam, arcu lectus lacinia risus, nec viverra dolor justo a lorem. Praesent non elit magna. Sed sit amet libero a mauris dictum rutrum id sit amet nisl. Vestibulum eu lorem ex. | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel lectus luctus, convallis purus in, tincidunt eros. In hac habitasse platea dictumst. Nam vestibulum eleifend dolor, vel suscipit neque tempor eu. Vivamus condimentum sed enim nec tincidunt. Fusce rhoncus magna quis risus posuere vestibulum. Aliquam non turpis eu felis convallis tincidunt ut nec lectus. Nulla facilisi. Nulla ac pharetra velit, in consectetur eros. Fusce commodo, dolor eget bibendum aliquam, arcu lectus lacinia risus, nec viverra dolor justo a lorem. Praesent non elit magna. Sed sit amet libero a mauris dictum rutrum id sit amet nisl. Vestibulum eu lorem ex. | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel lectus luctus, convallis purus in, tincidunt eros. In hac habitasse platea dictumst. Nam vestibulum eleifend dolor, vel suscipit neque tempor eu. Vivamus condimentum sed enim nec tincidunt. Fusce rhoncus magna quis risus posuere vestibulum. Aliquam non turpis eu felis convallis tincidunt ut nec lectus. Nulla facilisi. Nulla ac pharetra velit, in consectetur eros. Fusce commodo, dolor eget bibendum aliquam, arcu lectus lacinia risus, nec viverra dolor justo a lorem. Praesent non elit magna. Sed sit amet libero a mauris dictum rutrum id sit amet nisl. Vestibulum eu lorem ex. | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel lectus luctus, convallis purus in, tincidunt eros. In hac habitasse platea dictumst. Nam vestibulum eleifend dolor, vel suscipit neque tempor eu. Vivamus condimentum sed enim nec tincidunt. Fusce rhoncus magna quis risus posuere vestibulum. Aliquam non turpis eu felis convallis tincidunt ut nec lectus. Nulla facilisi. Nulla ac pharetra velit, in consectetur eros. Fusce commodo, dolor eget bibendum aliquam, arcu lectus lacinia risus, nec viverra dolor justo a lorem. Praesent non elit magna. Sed sit amet libero a mauris dictum rutrum id sit amet nisl. Vestibulum eu lorem ex. | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel lectus luctus, convallis purus in, tincidunt eros. In hac habitasse platea dictumst. Nam vestibulum eleifend dolor, vel suscipit neque tempor eu. Vivamus condimentum sed enim nec tincidunt. Fusce rhoncus magna quis risus posuere vestibulum. Aliquam non turpis eu felis convallis tincidunt ut nec lectus. Nulla facilisi. Nulla ac pharetra velit, in consectetur eros. Fusce commodo, dolor eget bibendum aliquam, arcu lectus lacinia risus, nec viverra dolor justo a lorem. Praesent non elit magna. Sed sit amet libero a mauris dictum rutrum id sit amet nisl. Vestibulum eu lorem ex. | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel lectus luctus, convallis purus in, tincidunt eros. In hac habitasse platea dictumst. Nam vestibulum eleifend dolor, vel suscipit neque tempor eu. Vivamus condimentum sed enim nec tincidunt. Fusce rhoncus magna quis risus posuere vestibulum. Aliquam non turpis eu felis convallis tincidunt ut nec lectus. Nulla facilisi. Nulla ac pharetra velit, in consectetur eros. Fusce commodo, dolor eget bibendum aliquam, arcu lectus lacinia risus, nec viverra dolor justo a lorem. Praesent non elit magna. Sed sit amet libero a mauris dictum rutrum id sit amet nisl. Vestibulum eu lorem ex. | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel lectus luctus, convallis purus in, tincidunt eros. In hac habitasse platea dictumst. Nam vestibulum eleifend dolor, vel suscipit neque tempor eu. Vivamus condimentum sed enim nec tincidunt. Fusce rhoncus magna quis risus posuere vestibulum. Aliquam non turpis eu felis convallis tincidunt ut nec lectus. Nulla facilisi. Nulla ac pharetra velit, in consectetur eros. Fusce commodo, dolor eget bibendum aliquam, arcu lectus lacinia risus, nec viverra dolor justo a lorem. Praesent non elit magna. Sed sit amet libero a mauris dictum rutrum id sit amet nisl. Vestibulum eu lorem ex. | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel lectus luctus, convallis purus in, tincidunt eros. In hac habitasse platea dictumst. Nam vestibulum eleifend dolor, vel suscipit neque tempor eu. Vivamus condimentum sed enim nec tincidunt. Fusce rhoncus magna quis risus posuere vestibulum. Aliquam non turpis eu felis convallis tincidunt ut nec lectus. Nulla facilisi. Nulla ac pharetra velit, in consectetur eros. Fusce commodo, dolor eget bibendum aliquam, arcu lectus lacinia risus, nec viverra dolor justo a lorem. Praesent non elit magna. Sed sit amet libero a mauris dictum rutrum id sit amet nisl. Vestibulum eu lorem ex.</p> | |
| <!-- Add more content as needed --> | |
| </div> | |
| </div> | |
| <div class="scrollbar"> | |
| <div class="scrollbar-thumb"></div> | |
| </div> | |
| <button class="scroll-up">Up</button> | |
| <button class="scroll-down">Down</button> | |
| <script> | |
| const scrollBox = document.querySelector('.scroll-box'); | |
| const content = document.querySelector('.content'); | |
| const scrollbar = document.querySelector('.scrollbar-thumb'); | |
| const scrollBarContainer = document.querySelector('.scrollbar'); | |
| const scrollUpBtn = document.querySelector('.scroll-up'); | |
| const scrollDownBtn = document.querySelector('.scroll-down'); | |
| let isDragging = false; | |
| scrollbar.addEventListener('mousedown', (e) => { | |
| isDragging = true; | |
| const startY = e.clientY; | |
| const startScroll = scrollBox.scrollTop; | |
| document.addEventListener('mousemove', mouseMoveHandler); | |
| document.addEventListener('mouseup', mouseUpHandler); | |
| function mouseMoveHandler(e) { | |
| const deltaY = e.clientY - startY; | |
| const scrollY = startScroll + deltaY / scrollBox.clientHeight * content.scrollHeight; | |
| scrollBox.scrollTop = scrollY; | |
| } | |
| function mouseUpHandler() { | |
| isDragging = false; | |
| document.removeEventListener('mousemove', mouseMoveHandler); | |
| document.removeEventListener('mouseup', mouseUpHandler); | |
| } | |
| }); | |
| scrollUpBtn.addEventListener('click', () => { | |
| scrollBox.scrollTop -= 50; // Adjust scroll amount as needed | |
| }); | |
| scrollDownBtn.addEventListener('click', () => { | |
| scrollBox.scrollTop += 50; // Adjust scroll amount as needed | |
| }); | |
| function updateScrollbar() { | |
| const contentHeight = content.scrollHeight; | |
| const visibleHeight = scrollBox.clientHeight; | |
| const scrollHeight = scrollBox.scrollTop; | |
| const scrollbarHeight = (visibleHeight / contentHeight) * visibleHeight; | |
| const maxScrollbarTop = visibleHeight - scrollbarHeight; | |
| let scrollbarTop = (scrollHeight / (contentHeight - visibleHeight)) * maxScrollbarTop; | |
| if (scrollHeight === contentHeight - visibleHeight) { | |
| scrollbarTop = maxScrollbarTop; // Set scrollbar to the bottom if scrolled to the bottom | |
| } | |
| const scrollbarContainerHeight = scrollBarContainer.clientHeight; | |
| const thumbHeight = Math.max((scrollbarHeight / contentHeight) * scrollbarContainerHeight, 20); // Minimum thumb height | |
| scrollbar.style.height = `${thumbHeight}px`; | |
| scrollbar.style.top = `${scrollbarTop * (scrollBarContainer.clientHeight / 3672)}px`; | |
| } | |
| scrollBox.addEventListener('scroll', updateScrollbar); | |
| window.addEventListener('resize', updateScrollbar); | |
| updateScrollbar(); // Initial scrollbar setup | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment