Unfortunately, the people who make Outlook thought it was a good idea to design their own custom scrollbars and replace the default ones that display on the Windows operating system.

The reason you don't see this happen in Microsoft Edge is that Edge doesn't support the ::-webkit-scrollbar CSS rules that allow the developers to customize the appearance of the scrollbars because it's a relatively new rule.

In fact, Firefox just recently started supporting that rule. Other browsers like Chrome and Safari supported that long before the Firefox developers adopted it.

What you can do, is install the Custom Style Script addon and set https://outlook.live.com/ as the URL and enter the following in the CSS section:

.customScrollBar, body {

    scrollbar-width:inherit !important;

}

This basically just overrides the setting that the Outlook developers have applied to their website.

Wesley -

Thanks very large - that fixed it for me.

Chuck

You can also consider to disable the pref that is involved with the scroll bar width and possibly with the scroll bar color.

• layout.css.scrollbar-width.enabled = false
• layout.css.scrollbar-color.enabled = false

You can open the about:config page via the location/address bar. You can accept the warning and click "I accept the risk!" to continue.

• http://kb.mozillazine.org/about:config

I know how to do the add on but don't know how to do the following:

and set https://outlook.live.com/ as the URL and enter the following in the CSS section:

.customScrollBar, body {

   scrollbar-width:inherit !important;

I am using Windows 7. Please help me. Thank you

I clicked on the add-on symbol at the upper right, looks like: < / > only in negative.

Then scrolled down to the table where the heading says URL on the left and Style (CSS) on the right.

Punch in https://outlook.live.com/ in the URL box and

.customScrollBar, body {

   scrollbar-width:inherit ;

}

in the Style (CSS) box

Then press the + bar on the right (also in negative) and as I recall I was all set

Using the layout.css.scrollbar-width.enabled preference that cor-el mentioned is actually a far easier method and it will work across all websites. I'd recommend it over my method.

To do his method, just do the following:

1. Type about:config in your Firefox address bar
2. Bypass the security warning (we'll be careful, I promise)
3. In the search bar that appears on that page, enter layout.css.scrollbar-width.enabled
4. Double click that preference that appears to set it to false
5. In the search bar that appears on that page, enter layout.css.scrollbar-color.enabled
6. Double click that preference that appears to set it to false
7. Restart Firefox

If you wish to still try my method, I'll gladly walk you through it, but I'd recommend cor-el's method over mine. Had I known about the method he describes, I would have recommended it instead.

Hope this helps.

Wesley -

Thanks for the walk-through on the second method, I'll keep it in mind but your way is working fine for me.

Hopefully avwood has seen your post.

Chuck

Dear Wesley,

I am using Windows 7 though. Will you solution still work. Incidentally I panicked after typing in about:config and pressing return when it said voiding warranty and harmful to stability, security and performance.

I am old and not a computer nerd.

Thanks,

Anthony

Dear Wesley,

Can you talk me through the other method (cor-els) but was it only for Windows 10.

So grateful for your help.

Thanks,

Anthony

Dear cor-el

I am so sorry I am old and not computer savvy but I am finding it difficult to do what you have told me.

So far I definitely have the extension oc custom style script in m Firefox. It lists is when I check on add ons.

But then I don't know what to do.

I clicked on the link you sent me and the following page came up. I have snipped it and hope it comes out below where I can add images.

But I don't know what to do next. Also, as I said before I am Windows 7 not Windows 10.

Sorry for my slowness. I value your help but can you list the steps slowly so I can do it.

Thank you so much

Anthony

avwood said

I am using Windows 7 though. Will you solution still work. Incidentally I panicked after typing in about:config and pressing return when it said voiding warranty and harmful to stability, security and performance. I am old and not a computer nerd.

Yes, cor-el's solution will work across all versions of Windows, including Windows 7. It's also far easier than mine. The warning screen seems scary, but that's just to stop people who think they are computer geniuses (but actually aren't) from going in, changing a bunch of settings and then breaking Firefox on their computer.

As long as you follow the steps I provided above, there will be no issues and no risk.

Dear Wesley,

I am sorry I am so scared of computers. You told me that cor-el's method was better. Can you give me the steps to that or is your method simpler?

Sorry but I am old and non computer savvy.

Anthony

Dear Wesley,

It is me again. Yes, I have looked at the steps with cor-el's method and scared. Is it possible you can send me an email showing what the screen looks like after each step I do? That way I am less likely to panic and upset things. I shall understand if I am asking too much and you prefer to ignore me. Nevertheless I still thank you so much for your time.

To do his method, just do the following:

   Type about:config in your Firefox address bar
   Bypass the security warning (we'll be careful, I promise)
   In the search bar that appears on that page, enter layout.css.scrollbar-width.enabled
   Double click that preference that appears to set it to false
   In the search bar that appears on that page, enter layout.css.scrollbar-color.enabled
   Double click that preference that appears to set it to false
   Restart Firefox

It's not problem. I made a short video for you. There's no audio, but it's mostly just clicking and typing so nothing really to explain.

To change the values from true to false, you just double click on each value. If you can't get the clicking to work, you can also right click and select Toggle.

Hope this helps.

Dear Wesley, I hope you are not fed up with me yet? Thank you for the video. A couple of questions comparing the video to your earlier script:

The following is your text script to me:

    Type about:config in your Firefox address bar
   Bypass the security warning (we'll be careful, I promise)
   In the search bar that appears on that page, enter layout.css.scrollbar-width.enabled
   Double click that preference that appears to set it to false
   In the search bar that appears on that page, enter layout.css.scrollbar-color.enabled
   Double click that preference that appears to set it to false
   Restart Firefox 

In your script above you said: layout.css.scrollbar-width.enabled but in the video you just entered layout.css.scrollbar

Yes I see then how to change the two values to false

But at that point you seem to end the video whereas your text tells me then (Step 5) to enter: layout:css.Scrollbar-color.enabled and to double click and set the preference to false.

I didn't see you do that on the video or did I miss it as it was so quick?

My confidence is building up. I just wan to be 100% sure before I alter anything in the settings in case I muck up the computer.

Again, my sincere thanks, Anthony

Dear Wesley,

Reading again the help I have been shown, it says: To use the CSS code you need to install an extension in Firefox.

   Custom Style Script (Inject desired CSS or JS) https://addons.mozilla.org/firefox/addon/custom-style-script/ 

As an alternative you can disable a pref on the about:config page to remove support for this feature.

   layout.css.scrollbar-width.enabled = false
   layout.css.scrollbar-color.enabled = false 

I have installed the css code extension. But the it says there is an alternative. So should I remove the Custom Style Script before I do not next two things, i.e.

   layout.css.scrollbar-width.enabled = false
   layout.css.scrollbar-color.enabled = false 

I won't be insulted if you are fed up with me but I do want to assure you I am so delighted to have your advice.

Thanks,

Anthony

My apologies for the discrepancy in the video compared to my written instructions. If you type "layout.css.scrollbar" only in the search bar, it will find hte two values that we need, since the search feature will find anything with "layout.css.scrollbar" in it. This will include the layout.css.scrollbar-width.enabled and layout.css.scrollbar-color.enabled preferences since they both happen to start with the same words.

As for removing the add-on, if you plan to go with the alternative method that I created the video for, then you can go ahead and remove the add-on. It's not necessary, but there's not much point to keeping the add-on if you aren't ever going to use it.

Dear Wesley,

Thank you so very much. I now have wider scroll bars in my hotmail/outlook.

I am so grateful to you; especially for putting up with so many questions from this old bloke.

Have got rid of the custom style script as you said.

Again, my thanks and very best wishes

Anthony

No problem! Glad to hear that everything is now working the way you want it to!