How to hide scrollbar without affecting the body width using javascript?

Question

How to hide the scrollbar without affecting the body width using JavaSCript? Whenever I click a button, the scrollbar gets hidden which is alright, but the body width gets affected. I want the body width remaining the same whether the scroll bar is hidden or not.

You can use css margin-right to do the UI trick. Need you to provide some example codes to work on the answer. — junwen-k
– junwen-k, Commented Nov 10, 2019 at 7:22

TutorialSpot · Accepted Answer · 2019-11-10 08:21:56Z

1

You can hide your scrollbar with the following styles without changing affecting on the body:

body::-webkit-scrollbar
  {
    width: 0;
  }

i hope this will work for you.

answered Nov 10, 2019 at 8:21

TutorialSpot

892 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ouroborus · Accepted Answer · 2019-11-11 02:41:24Z

1

If you give the body overflow: hidden on clicking the button, you can set padding-right: 17px to the body.

edited Nov 11, 2019 at 2:41

Ouroborus

17k8 gold badges42 silver badges65 bronze badges

answered Nov 10, 2019 at 7:26

MahmoudKamal4792

794 bronze badges

Collectives™ on Stack Overflow

How to hide scrollbar without affecting the body width using javascript?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related