Bootstrap nie wyświetla scrollbara

1	komentarz 2 czerwca 2020 przez zoya Bywalec (2,840 p.) Bootstrap raczej nie wpływa na wygląd scrollbara, więc będzie potrzebny Twój kod, żeby sprawdzić gdzie jest błąd. Sprawdź też czy scrollbar wygląda tak samo w różnych przeglądarkach.

komentarz 2 czerwca 2020 przez WasiliewSaszka Użytkownik (700 p.)

A więc wysyłam cały kod Html/css z obu stron internetowych.

Zaczynam od bootstrapa gdzie kod wydają się nie działać.

Html:

<!DOCTYPE html>
<html lang="pl">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Nuno - Responsive Bootstrap Theme</title>
	<link rel="stylesheet"href="https://unpkg.com/simplebar@latest/dist/simplebar.css"/>
	<link rel="stylesheet" href="bootstrap-4.1.3-dist/css/bootstrap.min.css">
	<link rel="stylesheet" href="css/fixed.css">
	<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
	<link rel="stylesheet" href="style.css">
</head>
<body>
<!---Start Navigation menu-->	
<header>
	<div class="container">

<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
	  <a class="navbar-brand" href="#"><img src="img/plata.png"></a>
		  <button class="navbar-toggler" type="button" data-toggle="collapse"
			  data-target="#navbarResponsive">
		  <span class="navbar-toggler-icon"></span>
	  </button>
<div class="collapse navbar-collapse" id="navbarResponsive">
	<ul class="navbar-nav ml-auto">
	  <li class="nav-item">
</li>


<nav>
	 <ul>
		 <li><a href="https://pl.wikipedia.org/wiki/Mi%C4%99dzynarodowa_Stacja_Kosmiczna">Produkty</a></li>
		 <li><a href="#">Informacje</a></li>
		 <li><a href="#">Kontakt</a></li>
		 <li><a href="#">Zniżki</a></li>
	</ul>
</nav>
</header>
<!---End navigation menu-->

<!---Start front image -->
<div class="FirstImage">
  <div class="row">
	  <img class="img-fluid mt-5"  src="img/firstimg.png">
      </div>
  </div>
</div>
<!---End front image-->

<!---Start colorfull scrollbar-->


<!---End colorfull scrollbar-->

<!---Start main content-->

<div class="content">
<div class="row">
<h1>xshisvqUQVCQVCQ</h1>
<h1>xshisvqUQVCQVCQ</h1>
<h1>xshisvqUQVCQVCQ</h1>
<h1>xshisvqUQVCQVCQ</h1>
<h1>xshisvqUQVCQVCQ</h1>
<h1>xshisvqUQVCQVCQ</h1>
<h1>xshisvqUQVCQVCQ</h1>
<h1>xshisvqUQVCQVCQ</h1>
<h1>xshisvqUQVCQVCQ</h1>
<h1>xshisvqUQVCQVCQ</h1><h1>xshisvqUQVCQVCQ</h1>
<h1>xshisvqUQVCQVCQ</h1>
<h1>xshisvqUQVCQVCQ</h1>
<h1>xshisvqUQVCQVCQ</h1>
<h1>xshisvqUQVCQVCQ</h1>
<h1>xshisvqUQVCQVCQ</h1>
<h1>xshisvqUQVCQVCQ</h1>
<h1>xshisvqUQVCQVCQ</h1>
<h1>xshisvqUQVCQVCQ</h1>
<h1>xshisvqUQVCQVCQ</h1>
<h1>xshisvqUQVCQVCQ</h1>
<h1>xshisvqUQVCQVCQ</h1>
<h1>xshisvqUQVCQVCQ</h1>
<h1>xshisvqUQVCQVCQ</h1>
<h1>xshisvqUQVCQVCQ</h1><h1>xshisvqUQVCQVCQ</h1>
<h1>xshisvqUQVCQVCQ</h1>
<h1>xshisvqUQVCQVCQ</h1>
<h1>xshisvqUQVCQVCQ</h1>
<h1>xshisvqUQVCQVCQ</h1>
<h1>xshisvqUQVCQVCQ</h1>
<h1>xshisvqUQVCQVCQ</h1>
<h1>xshisvqUQVCQVCQ</h1>
<h1>xshisvqUQVCQVCQ</h1>
<h1>xshisvqUQVCQVCQ</h1>
<h1>xshisvqUQVCQVCQ</h1>
<h1>xshisvqUQVCQVCQ</h1>
<h1>xshisvqUQVCQVCQ</h1>
<h1>xshisvqUQVCQVCQ</h1>
<h1>xshisvqUQVCQVCQ</h1><h1>xshisvqUQVCQVCQ</h1>
<h1>xshisvqUQVCQVCQ</h1>
<h1>xshisvqUQVCQVCQ</h1>
<h1>xshisvqUQVCQVCQ</h1>
<h1>xshisvqUQVCQVCQ</h1>			
</div>	
</div>

<!---End main content-->


<!--- Script Source Files -->
<script src="https://unpkg.com/simplebar@latest/dist/simplebar.min.js"></script>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="bootstrap-4.1.3-dist/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.5.0/js/all.js"></script>
<!--- End of Script Source Files -->

</body>
</html>

Wstawiłem tam kilkanaście znaczników h1 bo inaczej scrollbar nie pokazałby się.

Teraz css gdzie zaczyna się on od 75 linijki znacznikiem /*--- Start colored scrollbar --- */

CSS:

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@1,700&display=swap');
body{
  margin: 0;
  background: #222;
}
.container{
  width: 80%;
  margin: 0 auto;

/* --- Start navigation menu --- */

}
header{
  background: #55d6aa;
}
header::after{
  content: '';
  display: table;
  clear: both;
}

.logo{
  float: left;
  padding: 1rem;
}

/* --- Start navigation menu --- */

nav{
  float: right;
}

nav ul{
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li{
  display: inline-block;
  margin-left: 1rem;
  padding-top: 0.2rem;
  margin-left: 2.5rem;

  position: relative;
}
nav a{
color: #BDB76B;
text-decoration: none;
text-transform: uppercase; 
font-size: 20px;
}
nav a:hover{
  color: #FF8C00;
}
nav a::before{
  content:'';
  display: block;
  height: 0.5rem;
  width: 100%;
  background-color: #FF8C00;

  position: absolute;
  top: 0;
  width: 0%;
  transition: all ease-in-out 700ms;
}
nav a:hover::before{
  width: 100%;
}
/* --- End navigation menu --- */



   /*--- Start colored scrollbar --- */
   ::-webkit-scrollbar{
    width: 12px; 
    }
    
    ::-webkit-scrollbar-thumb{
    background: linear-gradient(transparent,#30ff00);
    border-radius: 6px;
    }
    
    ::-webkit-scrollbar-thumb:hover{
     background: linear-gradient(transparent,#FF8C00);

/* --- End colored scrollbar --- */




/* --- Start content section --- */

/* --- End content section --- */







/*============ BOOTSTRAP BREAK POINTS:

Extra small (xs) devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap

Small (sm) devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

Medium (md) devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

Large (lg) devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

Extra (xl) large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

=============*/

To był plik z bootostrapem. Teraz pora na plik bez bootstrapa (Kod który odpowiada za scrollbara w obu plikach jest identyczny)

HTML:

<html>
<HEAD>
<link rel="stylesheet" href="styl.css">
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="TEXT/HTML;CHARSET=UTF-8">
<TITLE>
Praca domowa
</TITLE>
</head>
<body>
<div id="Pudelko">
<img src="tapeta.jpgeg">

<div class="Tbar">
Tbar
</div>

<div class="Lbar">
Lbar
</div>

<div class="Mbar">
Mbar
</div>

<div class="Rbar">
Rbar
</div>

<div class="M Lbar">
M Lbar
</div>

<div class="M Mbar">
M Mbar
</div>

<div class="M Rbar">
M Rbar
</div>

<div class="B Lbar">
B Lbar
</div>

<div class="B Mbar">
B Mbar
</div>

<div class="B Rbar">
B Rbar
</div>
<h1>hdugqudqcqdqcvquecgqucdgq</h1>
<h1>hdugqudqcqdqcvquecgqucdgq</h1>
<h1>hdugqudqcqdqcvquecgqucdgq</h1>
<h1>hdugqudqcqdqcvquecgqucdgq</h1>
<h1>hdugqudqcqdqcvquecgqucdgq</h1>
<h1>hdugqudqcqdqcvquecgqucdgq</h1>
<h1>hdugqudqcqdqcvquecgqucdgq</h1>
<h1>hdugqudqcqdqcvquecgqucdgq</h1>
<h1>hdugqudqcqdqcvquecgqucdgq</h1>
<h1>hdugqudqcqdqcvquecgqucdgq</h1>
<h1>hdugqudqcqdqcvquecgqucdgq</h1>
<h1>hdugqudqcqdqcvquecgqucdgq</h1>
<h1>hdugqudqcqdqcvquecgqucdgq</h1>
<h1>hdugqudqcqdqcvquecgqucdgq</h1>
<h1>hdugqudqcqdqcvquecgqucdgq</h1>
<h1>hdugqudqcqdqcvquecgqucdgq</h1>
<h1>hdugqudqcqdqcvquecgqucdgq</h1>
<h1>hdugqudqcqdqcvquecgqucdgq</h1>
<h1>hdugqudqcqdqcvquecgqucdgq</h1>
<h1>hdugqudqcqdqcvquecgqucdgq</h1>
<h1>hdugqudqcqdqcvquecgqucdgq</h1>
<h1>hdugqudqcqdqcvquecgqucdgq</h1>
<h1>hdugqudqcqdqcvquecgqucdgq</h1>
<h1>hdugqudqcqdqcvquecgqucdgq</h1>
</div>
</body>
</html>

CSS:

body
 { background-image: url(tapeta.jpg) }
#pudelko
{
	width:100%;
	height:100%;
}
.Tbar
{
	width:99%;
	height:10%;
	background-color:#666666;	
	float: left;
	border-width: 1mm; border-style: solid;


}
.Lbar
{
	margin-top: 5px;
	width:32%;
	height:28%;
	background-color:#777777;
	float: left;
	border-width: 1mm; border-style: solid;
}

.Mbar
{
	margin-top: 5px;
	margin-left: 5px;
	width:33%;
	height:28%;
	background-color:#888888;
	float: left;
	border-width: 1mm; border-style: solid;
}

.Rbar
{
	margin-top: 5px;
	margin-left: 5px;
	width:32%;
	height:28%;
	background-color:#888888;
	float: left;
	border-width: 1mm; border-style: solid;
}

.M Lbar
{
	margin-top: 5px;
	margin-left: 5px;
	width:32%;
	height:28%;
	background-color:#888888;
	float: left;
	border-width: 1mm; border-style: solid;
}

.M Mbar
{
	margin-top: 5px;
	margin-left: 5px;
	width:32%;
	height:28%;
	background-color:#888888;
	float: left;
	border-width: 1mm; border-style: solid;
}

.M Rbar
{
	margin-top: 5px;
	margin-left: 5px;
	width:32%;
	height:28%;
	background-color:#888888;
	float: left;
	border-width: 1mm; border-style: solid;
}

.B Lbar
{
	margin-top: 5px;
	margin-left: 5px;
	width:32%;
	height:28%;
	background-color:#888888;
	float: left;
	border-width: 1mm; border-style: solid;
}

.B Mbar
{
	margin-top: 5px;
	margin-left: 5px;
	width:32%;
	height:28%;
	background-color:#888888;
	float: left;
	border-width: 1mm; border-style: solid;
}

.B Rbar
{
	margin-top: 5px;
	margin-left: 5px;
	width:32%;
	height:28%;
	background-color:#888888;
	float: left;
	border-width: 1mm; border-style: solid;
}

::-webkit-scrollbar{
width: 12px; 
}

::-webkit-scrollbar-thumb{
background: linear-gradient(transparent,#30ff00);
border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover{
 background: linear-gradient(transparent,#FF8C00);
}

Funkcja która odpowiada za kolorowego scrollbara znajduje się na samym dole pliku css.

1	komentarz 2 czerwca 2020 przez zoya Bywalec (2,840 p.) A jak nazywa się Twój plik ze stylami css? W wersji z bootstrapem masz: <link rel="stylesheet" href="style.css">, a bez: <link rel="stylesheet" href="styl.css">, więc najprawdopodobniej tu jest błąd.