Having difficulty in getting rid of the horizontal scrollbar

I need help replacing the horizontal scrollbar with arrow buttons to scroll through images (not the entire page).

This is the code I tried:

.scroll-images::-webkit-scrollbar{
            -webkit-appearance: none;
        }

However, the scrollbar is still visible. Here is the complete code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Horizontal Scroll Bar</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
            background-color: black;
        }
        body {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            width: 100%;
            background-color: black;
        }

        .main-scroll-div{
            width: 90%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border: 2px solid red;
        }

        .cover{
            position: relative;
            width: 90%;
            height: 50%;
        }

        .scroll-images{
            width: 100%;
            height: auto;
            display: flex;
            justify-content: left;
            align-items: center;
            overflow: auto;
            position: relative;
            scroll-behavior: smooth;
        }

       

        .child{
            min-width: 600px;
            height: 450px;
            margin: 1px 10px;
            cursor: pointer;
            border: 1px solid white;
            overflow: hidden;
        }

        .child-img{
            width: 100%;
            height: 100%;

        }

        .scroll-images::-webkit-scrollbar{
            -webkit-appearance: none;
        }

        .icon{
            color: green;
            background-color: black;
            font-size: 50px;
            outline: none;
            border: none;
            padding: opx 20px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="main-scroll-div">
        <div>
            <button class ="icon"> <i class="left"></i></button>
        </div>
        <div class ="cover">
            <div class="scroll-images">
                <div class="child"><img class="child-img" src="imges/1.jpg" alt="image"></div>
                <div class="child"><img class="child-img" src="imges/2.jpg" alt="image"></div>
                <div class="child"><img class="child-img" src="imges/3.jpg" alt="image"></div>
                <div class="child"><img class="child-img" src="imges/4.jpg" alt="image"></div>
            </div>
        </div>
        <div>
            <button class ="icon"> <i class="left"></i></button>
        </div>
    </div>
</body>
</html>

I also attempted using display: none and appearance: none, but neither worked.

Answer №1

I may not be an expert, but give this a shot

.scroll-pictures {
  -webkit-overflow-style: none;
  overflow-y: hidden;

Answer №2

::-webkit-scrollbar may not work consistently across different browsers, so it's important to test for cross-browser compatibility. Consider the following approach:

/* Hide scrollbar on Chrome, Safari, and Opera */
::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar on IE, Edge, and Firefox */
-ms-overflow-style: none;  /* IE and Edge */
scrollbar-width: none;  /* Firefox */

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

Tips for saving JavaScript results to a form

Hey there! I'm looking to figure out how to save a JavaScript calculation within a form instead of just displaying an alert or outputting it on another page. Below is the JavaScript code I have for calculating prices. <script type="text/javascript ...

How can the horizontal scroll bar width be adjusted? Is it possible to create a custom

Within my div, I have implemented multiple cards that scroll horizontally using the CSS property: overflow-x: scroll; This setup results in a horizontal scrollbar appearing under the div, which serves its purpose. However, I would prefer a customized scr ...

External CSS File causing improper sizing of canvas image

I have been working on implementing the HTML5 canvas element. To draw an image into the canvas, I am using the following javascript code: var img = new Image(); var canvas = this.e; var ctx = canvas.getContext('2d'); img.src = options.imageSrc; ...

Creating separation between a dropdown menu and its corresponding button

I'm dealing with a situation where I have a button that reveals a hidden droplist upon hover. The problem is that there is no space between the button and the droplist, causing interference with the functionality. My attempt to create some distance b ...

Retrieve all text within a <div> element excluding the content within an <h5> tag using XPath

I have been researching and experimenting with different solutions for the issue at hand, but unfortunately, none of them have proven successful so far. Here is the HTML code that I am working with: <div class="detalhes_colunadados"> <div clas ...

Identifying when a system window covers an iframe

After watching a fascinating YouTube video (https://www.youtube.com/watch?v=TzPq5_kCfow), I became intrigued by how certain features demonstrated in the video could be implemented using JavaScript. One specific question that arose for me was how one can d ...

The periodLookup array does not have a defined value for periodStr. Why is this error being caught?

Here is a method that I am working with: set_period_help_text: function(periodInput){ var metric = MonitorMetric.getSelectedMetric(); var periodStr = $('select[name=metric_period]').val(); var datapoints = Number(periodIn ...

Tips for identifying if the cursor is hovering over the :before or :after section of an element

One of the challenges I am facing involves CSS and defining drop areas for users to interact with, allowing them to either drop a section before or after existing sections. .section:before, .section:after { content: "[insert here]"; height: 64px; ...

Add some TD(s) after the td element

The HTML code I currently have is as follows: <tr> <td class="success" rowspan="1">Viability</td> <td data-rowh="-Checksum">Viability-Checksum</td> </tr> <tr> ...

Enhancing font awesome brand icons with tooltip functionality

I've been incorporating font awesome brand icons like fab fa-css3-alt, however, I'm facing difficulty in adding tooltips on hover. I've tried using the title attribute and data-toggle attribute based on some suggestions, but unfortunately, t ...

Troubleshooting Vue 3 Options API custom element with non-functional Bootstrap js files

Having trouble incorporating Bootstrap 5 into a Vue 3 Options Api custom element? Check out my setup below: import { defineCustomElement } from 'vue' import 'bootstrap/dist/js/bootstrap.bundle' import App from './App.ce.vue' ...

Ways to allow scroll events on top of an overlay without passing click events

My goal is to develop a unique map annotation tool with custom controls, not relying on the built-in features of map providers. Imagine something like this: https://i.sstatic.net/70Yj7.gif I had the idea of placing a canvas over the map for this purpose ...

Oops! Looks like the module "@google-cloud/vision" hasn't been loaded in this context yet. Make sure to use require([]) to load it before proceeding

Encountering an issue with the error message Module name "@google-cloud/vision" has not been loaded yet for context: _. Use require([]) while running my project. I have included require.js in my project and added the script tag in my HTML file <script d ...

The variable is only recognized within the function and not outside of it

Seeking assistance as a newcomer in debugging and implementing code, I have been trying various approaches to pass a base64string into JotForms for generating images in PDF format. Below is the screenshot of the error encountered. View error here The foll ...

Creating dual modes (night/day) for your AngularJS application

Currently, I am in the process of developing a project with Angularjs and facing an obstacle with animations. My goal is to implement a feature in my application that allows it to display in two different modes - night mode and day mode. I have come ac ...

Why must we always begin rotating with 0 in CSS Animation's webkit transform rotate?

Can anyone assist me with this issue? I have created a jsfiddle with an example. In summary, I am trying to rotate an "orange dart" in a circle every time the user clicks on a link. The rotation works fine, but the problem is that the "orange dart" always ...

Leveraging scrapy for pinpointing the accurate information within tables

I am facing a challenge with extracting text from a website that features multiple tables. My goal is to create a layout where the content spans across multiple pages, but the issue lies in the unpredictable nature of the xpath for these tables. The xpath ...

What technique works best for changing the visibility of an image without causing other elements to shift position?

On my webpage, I have a table cell with an image that should only display when hovering over the cell. The problem is that when the image is shown, it shifts the other text to the left because its default state is "display:none". I'm searching for a s ...

What is the best way to add a CSS rule to JavaScript?

animation: scaleUp 0.3s linear 0.4s forwards; animation: scaleDown 0.3s linear forwards; Greetings! I'm currently working on adding animations to my content filtering functionality. Specifically, I want to incorporate the aforementioned CSS rules in ...

Unable to load the requested resource: net::ERR_FAILED

I am facing an issue while trying to write React code. When using Chrome, I encountered the following warning: Access to XMLHttpRequest at 'file:///D:/programe/code/Vscode/ReactDemo/HelloWorld/test.js' from origin 'null' has been block ...