Scrolling up and down without visible scrollbars

I am facing a dilemma with a client who desires a similar functionality to the cargocollective theme nonfeed, but we have come to realize that this layout is quite challenging to navigate without specific tools like a scroll wheel, multi-touch scrolling, or a mobile device. For example, my client owns a netbook that lacks a trackpad scroll feature, making navigation nearly impossible. Additionally, I have observed that older individuals tend to rely on grabbing the scrollbar with a mouse.

While one potential solution could involve using jQuery.scrollTop() to implement individual div scrolling with arrows at the top and bottom of each div, this would add an extra layer of buttons that may not be ideal. Alternatively, displaying scrollbars is an option, but it goes against the aesthetic appeal of the design.

I am seeking advice on how to address this challenge: maintaining the visually appealing blank rectangle design while enabling smooth scrolling without requiring a scroll wheel, and minimizing any unnecessary clutter on the screen.

Answer №1

Essentially, a clever trick has been implemented to hide the scroll bar in this design. A container div is created to conceal the scroll bar from view, while an inner div with the same width as the container but with right padding becomes the scrollable element on the y-axis.

Here's the HTML structure:

<div id='outer'>
   <div id='scrollArea'>
       Insert Info here.
   </div>
</div>

CSS:

#outer{
   width:500px;
   height:100%;
   position:absolute;
   background-color:#ccc;
   overflow:hidden;
}
#scrollArea{
   width:500px;
   height:100%;
   overflow-y:scroll;
   padding-right:50px;
}
html,body{
   margin:0 0 0 0;
   padding:0 0 0 0;
}

You can view the implementation here: http://jsfiddle.net/n6S5S/

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

I am interested in updating the color of the navigation bar displayed on this website

I am having some trouble with manipulating the appearance of - Specifically, I'm struggling to change the color of the black bar at the top to blue. I have scoured the CSS files and examined the HTML, but I can't seem to locate the relevant code ...

Implementing a Tri-state Checkbox in AngularJS

I've come across various discussions on implementing a 3-state checkbox with a directive or using CSS tricks (such as setting 'indeterminate=true' which doesn't seem to work). However, I'm curious if there's another method to ...

Using jQuery's .is(":visible") method to check if an element, positioned absolutely outside of the viewport, is visible

I am currently exploring the most effective method to determine the visibility state of a div container with the CSS property position: absolute. On the left side of my viewport, I have a sidebar. By clicking the "sidebar-button," the sidebar smoothly tra ...

Different ways to display an HTML page in a well by utilizing a div tag and jQuery from a side menu

Check out my Tutorial Page! Currently, I am working on a simple tutorial page utilizing bootstrap 3. My goal is to showcase the HTML file content within the well container on the right side of the page. However, I am facing challenges as I do not want to ...

The self-align class in Bootstrap flexbox is not functioning correctly

I'm currently experimenting with creating a unique blog post layout using Bootstrap. My goal is to have the blog image on the left side, the title on the right side, and the author's name below the title. However, I've encountered an issue w ...

It is not possible for me to modify the attributes in responsive mode without first generating a new class within the tag

In order to make the attribute work in a responsive manner, I believe I need to create a class within the h2 tag. However, I am unsure where the issue lies. Could it possibly be related to the browser? Check out the image below for reference: this is my p ...

What is the process for adding a Contact Us page to a website?

I recently created a website using html, css and Javascript. I would like to include a 'get in touch' page where visitors can send me messages directly on the site. What steps should I take to make this happen? Is it necessary to set up a databas ...

Could jQuery and CSS be utilized for image enlargement?

Is it possible for jQuery (or CSS!) to detect an area around the mouse when hovering over an image, capture the image underneath, and then zoom in on that area? This concept differs from typical jQuery zoom effects where there are two separate images - sm ...

Reordering Bootstrap 4.1 columns for improved visibility on smaller screens

I'm having trouble adjusting the column order for small screen resolutions in Bootstrap 4.1. I've added the order prefix but nothing seems to be changing. Here is a snippet of my HTML code. Can anyone offer assistance? <div class="container-f ...

Issue with overlapping sticky dropdown and sticky navigation in Bootstrap 4

My issue revolves around getting the dropdown button menu to display in front of the vertical menu. When I click on the dropdown, the vertical (blue) menu takes precedence. This problem arose suddenly after applying the sticky-top class to both menus. Whil ...

Steps for altering the color of an element when it hovers over a different element

I'm curious if it's possible to achieve something similar using CSS and how can I do it? HTML: <h2 id="hi">Hello!!! :) </h2> <h3 id="bye">Bye!! :( </h3> CSS: #hi:hover { #bye { color: green; } } ...

Adjust the width of a DIV based on the width of its text content in CSS

Not long ago, I stumbled upon this fantastic example demonstrating how to incorporate material design elements in buttons. These buttons are created using a combination of classes that allow for easy customization with just a simple modification. However, ...

Reacting like sticky bottoms and tops

I'm working on a react/tailwind project that involves a component I want to be fixed at both the top and bottom of the screen. In simpler terms, there's an element that I need to always stay visible even when the user scrolls up or down the page ...

Showcasing both text and image side by side

https://i.sstatic.net/zR1G1.png Our current method for displaying text in one line and an image below it is shown below. I attempted to achieve this using position : relative: top: xxpx; bottom: xxpx;, but I believe there may be a more efficient way to c ...

Why does the IMG keep loading every time the web page is refreshed?

I am experiencing an issue with my html page where the background images are not reloading when I refresh the page, but the logo image is. The background images are called through an external CSS file, while the logo is used with an <image> tag. Wh ...

Struggling with aligning buttons in a horizontal navigation bar

I have been struggling to center the buttons on my navigation bar for quite some time now, despite my efforts searching through Google (I'm still a beginner in CSS). Below is the code I have for the navbar (excluding my numerous unsuccessful attempts ...

Option in the dropdown menu will not appear on the user interface if the data contains the "&" sign

Below is an example dataset I'm using for my dropdown selection: [ { "value":"example1", "name":"example name 1" }, { "value":"example2", "name":"example & name 2" ...

What is the best way to ensure your background image appears proportional?

I'm having an issue with the background image on my login page - it doesn't look like the original photo: Take a look at the screenshot to see the problem with the width of the image: https://i.sstatic.net/qb9u0.jpg Here's the HTML/jsx cod ...

What is the best way to activate materialise pop-up menus in a React application?

Looking to enhance my React app by adding a NavBar with dropdown functionality. Here's the code snippet: <ul id="dropdown1" className="dropdown-content"> <li><NavLink to="/create">Create lesson ...

What is the best way to reset the size of an element in webkit back to its original dimensions?

I am having an issue with an element that changes to display absolute and covers its parent element on focus via javascript. However, when it goes back to its default state on blur, it does not return to its original position. This problem seems to only o ...