Conceal the scroll bar within a div set to 100% viewport

Having some difficulty with a scrollbar on my new portfolio. The layout consists of two columns, with content on the left. I need the ability to scroll without displaying the scrollbar. I attempted the code below but it did not work. Could the issue be related to using the 100vh setting?

Here's what I tried:

.parent{
   height: 100vh;
   overflow: hidden;
}

.child{
   overflow-y: scroll;
}

My HTML:

<div class="slider">
<ul class="slides">
    <li class="container-fluid content">
        <div class="row row-eq-height">
            <div class="col-sm-6 static">
                <div class="text">
                    <div class="vertical">
                        <p>CONTENT</p>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 overflow-hidden">
                <div class="image personal">
                    <img src="IMAGE" alt="">
                </div>
            </div>
        </div>
    </li>
</ul>
</div>

Answer №1

Add the property height to this section:

.slider {
  overflow: hidden;
  margin: 0;
  padding: 0;
   height: 100vh;
}

To hide the inner scrollbar, adjust the negative margin values here:

.content .column .fixed {
  padding: 0px;
  height: 100vh;
  overflow: auto;
    margin: 0 -16px 0 16px;
}

Answer №2

.main .container .dynamic{display:none;}

insert the given snippet into your stylesheet

Answer №3

::-webkit-scrollbar { 
visibility: hidden; 
 }

It is important to note that only Mozilla browsers provide support for Web-Kit, and not Internet Explorer.

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

Grab images from clipboard, encountering blob Error

I'm having issues with copying and pasting images from the clipboard in Chrome. Can someone help me troubleshoot this error? Check out this js fiddle for reference Error Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileR ...

An easy guide to automatically refreshing a div with a seamless animation

I am working on an HTML page where I want to smoothly refresh a specific div every 60 seconds. What I have in mind is a simple process: fade out the div / refresh the div / fade in the div However, despite reading extensively about jQuery and AJAX for r ...

Obtaining template attributes in CKEditor: A guide

I have been working with the template plugin in CKEditor to load predefined templates. Each template is defined as follows: templates: [ { title: "Quickclick 1", image: "template1.png", description: "Quickclick 1 template", html_et: "& ...

Controlling the order of class specification prioritization

I have a situation with DOM elements that possess both the foo and bar classes: <div class="foo bar">...</div> I am looking to manage the priority between them. Referring to the W3C specification on this matter, I considered that appending ad ...

It appears that WebClient.DownloadString has a tendency to alter certain aspects of the HTML code retrieved from an external website

I have a website built with ASP.NET (.aspx) that I access from an ASP.NET MVC 4 mobile site (.cshtml) to retrieve its HTML response string. Both sites are hosted on a Windows Server 2008 R2 system and were developed using VS2010 Professional. -When direct ...

Looking to add a dropdown feature to my current main navigation bar

I've been struggling to add a drop-down menu to my website's main menu. Every time I try, something goes wrong - sometimes the menu appears inline, other times it completely messes up the layout. Here is the HTML code snippet: <ul class="m ...

Using React components to activate a click effect on the parent component

I have a React component called Card that has an onclick function triggered when the card is pressed. However, within this component, there are child elements such as sliders and buttons that perform their own actions. When clicking on these child elements ...

Using a div in React to create a vertical gap between two React elements

I am working with two React Components in my project - the Right Column and the Left Column. I am trying to create space between them using a div tag. Currently, my setup in the App.js file looks like this: import React from 'react'; import LeftC ...

Changing colors when hovering over different elements

I am struggling to create a hover color change effect that applies to all elements (icon, text, and button) from top to bottom. Currently, the hover effect only changes the color of either the text and icon or the button individually. Below is the code sn ...

Ways to implement a parallax effect by changing images within a specific div on scrolling with the mouse

First and foremost, thank you for taking the time to review my question. I am currently developing a website and I need to implement a vertical image transition effect within a selected division, similar to a parallax effect. Within this div, there are 3 ...

The picture within the bootstrap popover is spilling out of the popover

I need help resolving an issue on my webpage where images in popovers overflow when they reach a certain size. I used an online demo to create the page, but now I'm encountering this problem. How can I fix it? Check out the Js Fiddle for reference: h ...

Is it possible for me to use @import to selectively choose what I need and disregard the rest?

If I am utilizing SASS and wish to incorporate a significant portion of another existing stylesheet, whether it is in SASS or CSS format, I have the option to import that particular sheet using @import, then employ @extend to apply some of its rules. Is ...

Looking to showcase a .tif image in your Angular project?

This code is functioning properly for .png images. getNextImage(imageObj:{imageName:string,cityImageId:number,imgNumber:number}):void{ this.imgNumber= imageObj.imgNumber; this.imagePath=`assets/images/${imageObj.imageName}.png`; this.cityIma ...

Modify the color of the footer area and eliminate any underlines present

In the footer section, the tags are displaying in blue color and I would like to remove the line under the li tags. If necessary, I can provide additional HTML or CSS code for reference. Below is the snippet of HTML and CSS related to the footer: My HTML ...

How to integrate a chips feature in Angular 4 using Typescript

Struggling to incorporate a chips component into my Angular web application, which comprises Typescript, HTML, and CSS files. After grappling with this for weeks without success, I have yet to find the right solution. To review my current code, you can a ...

Using jQuery, wrap two specific HTML elements together

I am working with a set of elements: <div id="one">ONE</div> <div id="two">TWO</div> <div id="three">THREE</div> <div id="four">FOUR</div> <div id="five">FIVE</div> My goal is to wrap a DIV tag ...

Create a screen divided into two separate sections using horizontal split dividers

Trying to figure out how to set a div in HTML and then have a second div take up the remaining space. It seems like it should be simple, but I'm struggling with it. I'd like to have a div with a fixed height and then have another div take up the ...

Employing the GET method to retrieve the values of two text inputs

I'm struggling to retrieve the values from two text input fields: <form action="search.php"> <input type="text" name="q1"> <input type="text" name="q2" > <input type="submit" name="submit" value="Search" /> </form> On t ...

Enhance jQuery for a dynamic navigation dropdown with multiple sub-menus

Looking for help with a jQuery script as I am a beginner in using jQuery. jQuery(document).ready(function ($) { $(".sub-menu").hide(); $(".current_page_item .sub-menu").slideDown(200);; $("li.menu-item").click(function () { if ($('.sub-menu&apos ...

Changing the position of elements based on screen resolution for Desktop and Mobile

I'm working on a page with a sidebar that contains elements on desktop. When viewed on mobile, the sidebar moves under the main page. However, I would like those elements to be displayed above the main page on mobile, similar to this: Any suggestions ...