.notif{
  position: absolute;
  width: 100%;
  height: 15%;
  background-color: lightblue;
  border-radius: 7px;
  border: black 1px solid;
}

How do I make it so a scrollbar doesn't appear but still keep the border on?

CodePudding user response：

This code will hide the overflow in x-axis

.notif{
  position: absolute;
  width: 100%;
  height: 15%;
  background-color: lightblue;
  border-radius: 7px;
  border: black 1px solid;
  overflow-x:hidden;
}

CodePudding user response：

Use non-standard pseudo element ::-webkit-scrollbar you could keep scroll functionality, but hide the scroll bar. (if you are using safari, chrome, opera)

use -ms-overflow-style: for IE and edge and scrollbar-width for firefox

div{
font-size:30px;
}
::-webkit-scrollbar{
display:none;
}

<div class='div'>Stack Overflow is a question and answer website for professional and enthusiast programmers. It is the flagship site of the Stack Exchange Network,[4][5][6] created in 2008 by Jeff Atwood and Joel Spolsky.[7][8] It features questions and answers on a wide range of topics in computer programming.[9][10][11] It was created to be a more open alternative to earlier question and answer websites such as Experts-Exchange. Stack Overflow was sold to Prosus, a Netherlands-based consumer internet conglomerate, on 2 June 2021 for $1.8 billion.[12]

The website serves as a platform for users to ask and answer questions, and, through membership and active participation, to vote questions and answers up or down similar to Reddit and edit questions and answers in a fashion similar to a wiki.[13] Users of Stack Overflow can earn reputation points and "badges"; for example, a person is awarded 10 reputation points for receiving an "up" vote on a question or an answer to a question,[14] and can receive badges for their valued contributions,[15] which represents a gamification of the traditional Q&A website. Users unlock new privileges with an increase in reputation like the ability to vote, comment, and even edit other people's posts.[16]</div>

Prevent user from scrolling (disable this full functionality): use overflow:hidden

div{
font-size:35px;
overflow: hidden;
width:100vw;
height:80vh;
}

<div class='div'>Stack Overflow is a question and answer website for professional and enthusiast programmers. It is the flagship site of the Stack Exchange Network,[4][5][6] created in 2008 by Jeff Atwood and Joel Spolsky.[7][8] It features questions and answers on a wide range of topics in computer programming.[9][10][11] It was created to be a more open alternative to earlier question and answer websites such as Experts-Exchange. Stack Overflow was sold to Prosus, a Netherlands-based consumer internet conglomerate, on 2 June 2021 for $1.8 billion.[12]

The website serves as a platform for users to ask and answer questions, and, through membership and active participation, to vote questions and answers up or down similar to Reddit and edit questions and answers in a fashion similar to a wiki.[13] Users of Stack Overflow can earn reputation points and "badges"; for example, a person is awarded 10 reputation points for receiving an "up" vote on a question or an answer to a question,[14] and can receive badges for their valued contributions,[15] which represents a gamification of the traditional Q&A website. Users unlock new privileges with an increase in reputation like the ability to vote, comment, and even edit other people's posts.[16]</div>