Scrolling vertically without the appearance of a scrollbar

I've searched all over the internet for a solution to my problem, but nothing seems to work for me. I want to keep vertical scrolling ability while hiding the scrollbar from view in the y direction all the time.

The challenge is to make my #content-main div scroll independently from other divs. It's currently working fine, but there's that pesky scrollbar I can't seem to eliminate.

This is how my code is structured:

<body>
    <div id="ipad"> 
        <div id="sidebar-main">
            <div id="logo-main">Title</div>
            <div class="sidebar-option"></div>
            <div class="sidebar-option"></div>
            <div class="sidebar-option"></div>
            <div class="sidebar-option"></div>
            <div class="sidebar-option"></div>
            <div class="sidebar-option"></div>
            <div class="sidebar-option"></div>
            <div class="sidebar-option"></div>
        </div>

        <div id="content-main">

            <div id="search-main">
                <div id="category-search">
                    <i id="hamburger-icon" class="fa fa-bars"></i>
                    <input type="text" placeholder="Auto Loans" />
                    <i id="search-icon" class="fa fa-search"></i>
                </div>
            </div>

            <div id="page-content">
                <img id="home-img" src="home-page.png" /> /* temp */
            </div>

        </div>
    </div>
</body>

Here is the CSS relevant to my issue:

* {

    font-family: 'Open Sans', sans-serif;
    margin: 0;
}

html, body {

    margin: 10px;
    padding: 0;
    background: #ccc;
    overflow: hidden;
}

#ipad {

    padding: 0;
    margin: 0;
    width: 768px;
    height: 1024px;
    background: #fff;
    overflow: hidden;
}

#content-main {

    width: 600px;
    height: 100%;
    float: right;
    overflow: auto;
}

I've tried some solutions like this one (http://jsfiddle.net/5GCsJ/954/), but they haven't worked for me.

I also looked at resources like this one (), but they didn't help with my #content-main div.

If anyone has any ideas, I would really appreciate the help!

javascriptjqueryhtmlcss

Answer №1

To achieve independent scrolling for two separate divs, use the CSS code provided below. Make sure to close the #ipad div before starting the #content-main div.

<body>
<div id="ipad"> 
    <div id="sidebar-main">
        <div id="logo-main">Title</div>
        <div class="sidebar-option"></div>
        <div class="sidebar-option"></div>
        <div class="sidebar-option"></div>
        <div class="sidebar-option"></div>
        <div class="sidebar-option"></div>
        <div class="sidebar-option"></div>
        <div class="sidebar-option"></div>
        <div class="sidebar-option"></div>
    </div>
</div>
    <div id="content-main">
        <div id="search-main">
            <div id="category-search">
                <i id="hamburger-icon" class="fa fa-bars"></i>
                <input type="text" placeholder="auto loans" />
                <i id="search-icon" class="fa fa-search"></i>
            </div>
        </div>
        <div id="page-content">
            <img id="home-img" src="home-page.png" /> /* temp */
        </div>
    </div>


<style>
*{margin:0;}
#ipad{
height: 300px;
width: 100%;
border: 1px solid green;
overflow: hidden;
}
#sidebar-main{
 width: 100%;
height: 99%;
border: 1px solid blue;
overflow: auto;
padding-right: 15px;
}
#content-main{
width: 100%;
height: 100px;
border: 1px solid blue;
overflow: auto;
padding-right: 15px;
}

html, body{
height: 99%;
border: 1px solid red;
overflow:hidden;
}
</style>

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

The requested function is nowhere to be found within the confines of my Controller module

While working on a personal project, I encountered an issue where a function from another class in a separate Java file is not being found, even though it is defined in the respective class. EventView.js: displayEvent(event){ this.EventTitle = event. ...

javascript

When using the Three.js FBX loader to add objects to the scene, the newly added objects may not be present in the children array

After following the example provided on threejs.org for loading FBX files, I managed to successfully load my model using the function below: this.obj = null; var loader = new THREE.FBXLoader(); var objs = [] function load_init( object ) { mixer = ne ...

javascriptthree.jscameraloaderfbx

Margins and borders with a negative impact

I have a collection of images that I am trying to stack using negative margins. However, because stacking them without defined boundaries can lead to visual confusion, I thought about adding borders around each image. Surprisingly, while the images are sta ...

csscross-browsermargin

`HTTP Streaming with Axios in a Node JS Environment`

I am currently facing an issue while attempting to stream price data via HTTP (I'm surprised they aren't using websockets..). I usually use axios for making REST API requests, however, I am struggling to handle 'Transfer Encoding': &apo ...

javascriptnode.jshttpaxios

The console is failing to display the value associated with the key

In this snippet of JSON code, the key "pants" is nested under the "children" key for MALE when gender is selected as male. However, if the selected gender is female, then "pants" becomes a children key of FEMALE. var data = { "gender": "male", "myFi ...

javascriptjson

Only one instance of the Next.js inline script is loaded

Incorporating Tiny Slider into my Next.js application has been a success, but I am facing an issue with the inline script that controls the slider's behavior. The script loads correctly when I first launch index.js. However, if I navigate to another p ...

javascriptnext.js

Exploring the power of Vue3 with Shadow DOM in web components

I've been experimenting with web components using Vue3 and I'm curious about how the Shadow DOM works. I encountered an issue where a third party library was trying to access elements using getElementById() and it was throwing an error because th ...

javascriptvue.jsweb-componentvuejs3

Exploring the Method of Accessing data-* Attributes in Vue.js

I have a button that, when clicked, triggers a modal to open. The content displayed in the modal is determined by the data attributes passed to the button. Here is my button: <button class="btn btn-info" data-toggle="modal" data-t ...

javascriptvue.jsvuejs2custom-data-attribute

Display a close button for every individual item and use JavaScript to conceal the current item

I have a list that contains input fields along with delete link elements. I want to display the delete link element when the user hovers over the respective input field. Additionally, clicking on the close button (X) should hide the entire list item (li) f ...

javascripthtmlcsseventsdom

Integrating Express into a React Webpack project

I am currently in the process of integrating express into my React project to establish connections with databases for storing form data. As of now, I am using webpack to create a dev server that displays my React view. My technology stack includes... Web ...

javascriptnode.jsreactjsexpresswebpack

I can't seem to figure out why this file upload error is happening. What could be the

Having trouble with a simple file upload function and keep getting an "Error" message when trying to use it. Here's my HTML file: <form enctype='multipart/form-data' action='upload.php'> <input type='file' name ...

phphtml

update and rejuvenate session information using Node.js and express-session

Currently, I am working with Node.js in conjunction with express-session. Within my codebase, there is session data containing user information. req.session.user Upon updating the user's information, I update the session with the new data and then r ...

javascriptnode.jssession

Exploring a JSON file to generate a customized array for implementing autocomplete functionality in jQuery

I'm currently working on developing an autocomplete feature for a search bar that will display names of places in Norway. The data is being fetched from a REST API URL provided by a third party. As an example, when the input is "st" there are two res ...

javascriptjqueryjsonrestautocomplete

Is it possible to turn off the fallback color for bourbon radial gradients?

Is there a way to prevent the fallback from being applied when using the radial gradient mixin in Bourbon? I've consulted the documentation at , which states that the fallback is optional. However, no matter what I attempt, it seems that the primary ...

csssassmixinsfallbackbourbon

Using a PHP variable as the input for the img src attribute in HTML

I am currently working on a project that involves creating a gallery to showcase all the .jpg files from a specific local directory. However, I seem to be encountering some issues with it. <?php $directory = "img/"; $images = glob ...

phphtml

In the present technological landscape, is it still considered beneficial to place Javascript at the bottom of web pages?

As a beginner in web programming, I've recently delved into Javascript. A hot debate caught my attention - where should javascript be placed, at the top or at the bottom of a webpage? Supporters of placing it at the top argue that a slow loading time ...

javascripthtml

Navigating the issue of updateMany not functioning properly in mongoose and nodejs

I need assistance with updating the author name of a post whenever the user updates their profile name. My code is as follows: router('/:id', async (req, res) { if (req.body._id == req.params.id) { try { const user = await ...

javascriptnode.jsexpressmongoose

When the user clicks, position a div directly below another div

Can anyone help me figure out how to center a div underneath another one when a specific div is clicked using programming? I've tried multiple solutions but nothing seems to work. Below is the code snippet that I have written. You can also check out t ...

javascriptjquerycssangularjs

The pages are constantly showing an error message that reads, "There is a problem with the SQL syntax in your code."

I am having trouble with my login page as it is displaying an error on my index.php file. Below is the code snippet from my index.php: <?php include('supsrwk_epenyenggaraan.php'); ?> <?php if (!function_exists("GetSQLValueString")) { f ...

javascriptphpmysqlsql

The IISNode website displays directory contents instead of launching the server.js file

Having trouble configuring IISNode to automatically serve the main server.js application file for my node application. Currently, when I navigate to http://localhost:80/ where my app is hosted, it just displays the folder contents instead of running the se ...

javascriptnode.jsiisiisnode