Concealing scroll bars while still maintaining the ability to scroll by using overflow:scroll

Similar Question:
How to hide the scrollbar while still allowing scrolling with mouse and keyboard

I have created a sidebar for a web application that needs to enable users to scroll through it without displaying a scrollbar. The content is 500px high, while the container is only 300px high.

I have tried setting the container to overflow:scroll, which does show scroll bars as expected. I am aware that using overflow:hidden can disable the scroll bars altogether, but this also stops the scrolling functionality.

Is there a way to maintain scrolling functionality while hiding the scroll bars?

javascriptjquerycssoverflow

Answer №1

Check out a solution for hiding the scrollbar while still allowing scrolling with mouse and keyboard here

// determine the width of the textarea without scrollbar
var textareaWidth = document.getElementById("textarea").scrollWidth;

// set the wrapper width to match the inner part of the textarea
document.getElementById("wrapper").style.width = textareaWidth + "px";

You can also use jQuery along with the mousewheel plugin to enable scrolling with the mouse wheel or arrow keys while disabling the browser or element scrollbar. Find out more here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with AjaxForm functionality in Safari and Chrome

This specific javascript code functions correctly in Firefox, however it is not working in Safari or Chrome: $('#image').change(function() { $('#imageform').ajaxForm({ target: '#preview', success: function() ...

jqueryajaxajaxform

Tips for Customizing Dialogs with CSS Classes in mui5 Using Emotion/Styled

When attempting to customize the styling of a mui Dialog, I encountered an issue where it wouldn't accept className even when placed inside PaperProps. While inline styles worked, my preference was to import styles from a separate stylesheet named Sty ...

javascriptreactjsmaterial-ui

Retrieve the current time without having to refresh the page

Is there a way to display the current time without refreshing the page? The code I have currently only updates the time when manually refreshed. If anyone has a solution, I would greatly appreciate it! Thank you in advance! currentTime.php $(document).r ...

phpajaxjquery

Upon page refresh, products are automatically added to the cart

While developing a shopping cart code, I encountered an issue where refreshing the page automatically added a product to my cart without any action from me. For instance, my website displays three products: Apple, Banana, Orange. When I click on Apple, it ...

javascriptphpjqueryajaxsession

Unable to retrieve data from PHP using AJAX request

My project consists of 3 interconnected files: index.php, functions.js, and compute.php In index.php, there is a div that triggers a function in functions.js called compute(), which sends an AJAX request to perform a task in compute.php The code in index ...

javascriptphphtmlajax

Is one round the limit for my JavaScript image slider?

After studying the JavaScript Chapter on W3Schools, I attempted to create an image slider. Initially, everything worked perfectly for the first cycle. For instance, when I clicked the next button, the slides continued to slide until the end of the slidesho ...

javascriptjqueryhtmlcss

Trouble with implementing an onclick event listener in a foreach loop

While generating and adding HTML in a for loop, I noticed that adding onclick events within the same loop is not functioning correctly: items.forEach(item => { itemHtml = `<div class="${item.id}">${item.id}</div>`; $(".it ...

javascriptjqueryonclick

Variability in the values returned by the useState hook

Currently, I am working on developing my initial user signup form, and I have encountered a challenge that seems relatively simple to resolve but goes beyond my current expertise. The issue pertains to the helperText for an MUI select component which is no ...

javascriptreactjsmaterial-uiuse-state

Google Maps autocomplete feature is causing the input to update only after clicking in ng-model

After fetching a Google Maps place ID from a REST API, I utilize the Google Maps API to retrieve the place object in this manner: var geocoder = new google.maps.Geocoder; geocoder.geocode({ 'placeId': data.city }, fun ...

javascriptjqueryangularjsgoogle-maps

Mysterious source utilizing leafletView for showcasing popups within the Angular Leaflet Directive

I've been attempting to implement a pop-up window on an Angular Leaflet map using Prune Cluster, but I keep running into an error stating that 'leafletView' is an unknown provider. Despite following the examples provided on this page, https: ...

javascriptangularjsleafletangular-leaflet-directive

Self-contained VUE app

Can Vue.js be built as a standalone application so that I am not reliant on backend services from my web hosting provider? In essence, I would like to avoid having to start up the app through npm and instead simply open the index.html file from the dist f ...

javascriptvue.jsvuejs2vue-cli-3

Tips for positioning label/input box/button on Internet Explorer 7

Here is a Fiddle example you can check out, along with the corresponding code : <div class="menu-alto"> <ul> <li> <a title="Link" href="#">Link</a> </li> <li class="newsletter ...

htmlcss

Presenting XML data on a webpage using AJAX technology

I am currently working on setting up a web radio station with a program that allows streaming (jazler) to send xml files via ftp to a web server to automatically update information such as the current song playing and previous songs. The code for NowOnAir ...

javascripthtmlajaxxml

What is the best way to vertically align a two-line nav item?

I am looking to design a navigation menu with items that can accommodate one or two lines of text. The items should have consistent height and the text should be vertically centered. Additionally, I want the entire box to be clickable, not just the text w ...

htmlcss

Tips for showing error messages in response to exceptions

My function is supposed to display the response text that comes back from ex.responseText. However, every time I attempt it, it returns as "undefined" even though the text is there. onError: function (ex) { $('<div>' + ex._message + &a ...

javascriptjsonerror-handlingex

What is the method to assign an initial value to React.createRef()?

Scrolling management in my component is handled through a ref that represents the current scroll value. I've chosen to use refs instead of state and setState because using setState while the user is scrolling would result in a choppy and unresponsive ...

javascriptreactjsuse-ref

Is it possible for JavaScript to identify modifications in the HTML, like an input made with Ctrl+Shift+I?

Check out this website I'm currently working on. As a fun challenge for users, we're encouraging them to use ctrl+shift+i to manipulate the HTML and modify certain elements. Is it possible for Javascript or CSS/HTML to detect these changes? For ...

javascripthtmlcssuser-input

Retrieve the data stored in a JSON object

After making an ajax call, the json object that gets returned looks like this: Object {0: "1", 1: "jake", 2: "#00ff00", tip_id: "1", tip_details: "jake", tip_color: "#00ff00"} Object {0: "2", 1: "jakee", 2: "#00ff00", tip_id: "2", tip_details: "jakee", t ...

javascriptajaxjson

I'm encountering an issue in my node application where it is unable to access the push

I am a beginner in the world of node.js and express. Whenever I try to start my application using the command npm start, I encounter an error message saying Cannot Read property push of undefined from my index.js file. The problematic code snippet looks l ...

javascriptnode.jstypescriptexpress

What causes Angular to redirect to the route but display the incorrect view?

There is a fundamental issue I have encountered while working with routes: I have multiple routes defined If the user is not authenticated, they are redirected to the login page The problem lies in the fact that, on the initial display of the web app, t ...

javascriptangularjsangularjs-routing