Getting rid of the scrollbar in Internet Explorer

Instead of just removing the scrollbar, I want to ensure that scrolling capabilities remain intact. This is important because I want to create a 'slide show' effect on the website where users can click 'next' and scroll through content easily.

I have successfully hidden the scrollbar in other browsers using CSS for webkit and Firefox. However, I am struggling to find a solution to hide it in IE as well.

Some suggestions I found online involve changing the color properties of the scrollbar, but setting it to transparent did not make it disappear completely.

Is there a simple way to hide the scrollbar in IE, similar to using 'display:none'? I am open to exploring CSS and JavaScript options to achieve this.

Here is a jsFiddle link to demonstrate the issue

Please note: Adding 'overflow:hidden' prevents the page from exceeding the boundaries of the container when clicking on certain elements.

javascripthtmlcssinternet-explorerscrollbar

Answer №1

Check out this fiddle using your current code

Give this neat trick a try!

body, div, html{
    height:100%;
    width:100%;
    padding:0;
    margin:0;
}
body{
    overflow:hidden;
    position:fixed;
}
div{
    overflow-y:scroll;
    position:relative;
    right:-20px;
}

This code offsets a scrollable div so its vertical scrollbar is located outside the visible area.

Answer №2

I'm facing a similar issue where I don't want scroll bars on the main page, but I still need to have content within divs and spans.

After some searching, I discovered a solution that looks like this:

body {
    -ms-overflow-style: none;
}
div, span {
    -ms-overflow-style: auto;
}

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

Changing the font-family to 'Symbol' and using Windows-1252 character encoding

I have a collection of HTML documents that contain basic text encoded in Windows-1252, but scattered throughout the content are various instances of span elements styled with font-family: Symbol. For instance: <span style='font-family:Symbol& ...

htmlcssencodingcharacter-encodingfonts

When using the Ng --version command on a development package, it throws an error

I encounter an error with a development package when cloning a repository. I would greatly appreciate any advice on how to resolve this issue. https://i.stack.imgur.com/DBp5r.png ...

javascriptnode.jsangularnpm

Having trouble loading JSON api data in React?

Recently, I've delved into the world of React and was assigned a task to fetch data from a JSON API and showcase it on the screen. Initially, everything went smoothly while practicing with this URL - https://jsonplaceholder.typicode.com/users. Howeve ...

javascriptjsonreactjsapi

What is the correct RegEx pattern I should use to properly match the provided test case without including the ending period?

Regular Expression: /@([\S]*?(?=\s)(?!\. ))/g Given String: 'this string has @var.thing.me two strings to be @var. replaced'.replace(/@([\S]*?(?=\s)(?!\. ))/g,function(){return '7';}) Expected Result: ...

javascriptregex

Is there a way for me to display the image name at the bottom before uploading it, and have a new div created every time I upload an image?

Is there a way to display the image name at the bottom and have it create a new div every time an image is uploaded? I would appreciate any help with this... <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstra ...

javascripthtmljquerycsstwitter-bootstrap

Finding the main page URL using PHP within a JavaScript include: A comprehensive guide

I am facing an issue where I have a page with a header include that needs the phone number to change only if the filename of the current page contains a specific word. Typically, for a change outside of an include, the following code would suffice. <? ...

javascriptphp

Tips on applying the "activate" class to a Bootstrap navbar in Angular 2 when implementing page anchor navigation

As I work on my single-page website using Angular 2 and Bootstrap 4, I have successfully implemented a fixed navbar component that remains at the top of the page. Utilizing anchor navigation (#id), the navbar allows smooth scrolling to different sections o ...

htmlcsstwitter-bootstrapangular

Center text in the v-text-field label

Greetings! I've attempted various methods to center the label in my v-text-field, but unfortunately none of them have been successful. Please see the code snippet below: HTML Code <v-text-field dark class="centered-input" label="your code">< ...

htmlcssvue.jsvuetify.js

The text exceeds the maximum width of the table column

Currently, I am working with a table and utilizing the <col> tag to define column widths. However, I have encountered an issue where one of the columns, set at 5% width, contains a title that is 16 characters long, wider than the allocated 5%. As a ...

htmlcsswidthcss-tables

The Angular ng-repeat directive is populating a list with items, but the parameters enclosed in double curly braces

After calling an API, the response contains data in the following format: [{name: "ABC", age: 20}, {name: "DEF", age: 25}] Even though the $scope.names variable is assigned with the array from the API, when viewed in the browser, it displays 2 rows but th ...

htmlangularjs

Identifying an Android device using Javascript or jQuery

Is there a way to identify an Android device for styling a mobile website? I want to add specific CSS styles for users on the Android platform. Appreciate any help! ...

javascriptjqueryandroid

Executing JavaScript code within ASP.NET Visual Basic

My current web application uses jQuery and JavaScript, but I want to add more features that are supported in ASP.net VB. However, I am unsure if the JavaScript can run after the VB code. Essentially, I would like the web app to follow this sequence: ...

javascriptjqueryasp.netvb.nethtml

What is the best method for sending form data, specifically uploaded images, in Python Bottle with Ajax?

This form belongs to me <form method='post' enctype='multipart/form-data' id='uploadForm' name='formn'> <input type='file' value='' name='newfile'> <input type=&a ...

javascriptpythonajax

An unusual 'GET' request has been made to the '/json/version' endpoint in Express.js

Hey there, I'm facing a challenge with my Express project. For some reason, I keep receiving a 404 error due to a mysterious GET request to '/json/version'. The request seems to bypass the defined routers after adding session data and eventu ...

javascriptnode.jsexpressroutes

Tips for executing embedded scripts within templates

I am using a controller to display the Instagram embedded code <div class="instagram_here" [innerHtml]="instagram_embeded_code"></div> However, it is only showing a blank Instagram block. https://i.stack.imgur.com/gNPDL.png I suspect there m ...

javascriptangularinstagram

What is the best way to apply a CSS class to newly added records within an HTML table that are being fetched from a MySQL database?

The title does not provide clear instructions. If more details are needed, the code below displays data from a MySQL database table on an HTML page: <?php $db_host = 'localhost'; $db_name = 'DB'; ...

phphtmlmysql

Having trouble retrieving the data from the second child object in an object returned by an API call in a

Having trouble accessing the second child object of an object generated by an API response. The weather API in question can be found at . Refer to Display.js for a detailed explanation. App.js import React,{useState} from 'react'; import Navbar ...

javascriptreactjsjsonjsxresponse

Invoking a Vue method within a Laravel blade template

In my Laravel project, I have a blade that is loading a Vue component successfully. However, I am facing an issue where calling a method in the Vue component from a select box in the blade is not working as expected. Despite having a method call set up to ...

javascriptphplaravelvue.js

Place the bottom element of the top parent element in position

Creating a simple tooltip with bottom positioning at the top of the parent element involves setting a negative height for the tooltip element. However, when checking the height of the tooltip element upon hovering, it returns 0 according to console.log(). ...

javascriptjquerycsstooltip

What is the best way to customize the spacing of grid lines in chartist.js?

I am struggling with chartist.js. I want to increase the spacing between y-axis gridlines by 40px. (Currently set at 36px) I have tried looking for examples, but haven't found any. .ct-grids line { stroke: #fff; opacity: .05; stroke-dasharray: ...

javascriptchartslinechartchartist.js