0

I have created a simple website using HTML and CSS. Everything is working as it should, except for a scrollbar inside a textbox. The strange thing is that I have tested the CSS and HTML code for this box on a another website and it seemed to work perfectly fine.

See Below:

HTML:

<!doctype html>
  <html lang="en" class="no-js">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/temp.css">
    <title>Informatica Website - Projects</title>
  </head>
<body>
    <div class='content'>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu
        urna et leo aliquet malesuada ut ac dolor. Fusce non arcu vel ligula
        fermentum sodales a quis sapien. Sed imperdiet justo sit venenatis
        egestas. Integer vitae tempor enim. In dapibus nisl sit amet purus 
        congue tincidunt. Morbi tincidunt ut eros in rutrum. Sed quam erat, 
        vel tempor et, elementum at tortor. Praesent ac libero at arcu 
        eleifend mollis ut eget sapien. Duis placerat suscipit eros, eu 
        tempor tellus facilisis a. Vivamus vulputate enim felis, a euismod 
        diam elementumnon. Duis efficitur ac elit non placerat. Integer 
        porta viverra nunc,sed semper ipsum. Nam laoreet libero lacus.  
    </div>
  </body>
</html>

CSS:

.content {
  border: 1px dashed gray;
  padding: .5em;

  white-space: pre-wrap;
  height: 5em;
  overflow-y: scroll;
 }

.content::-webkit-scrollbar {
  display: none;
}

But when the same code is used in the following website it doesn't seem to work. It does show the text and the box, but the hidden scrollbar doesn't work. I have tried moving my in z-space, but that had little effect. I have looked everywhere to find a solution, but I haven't had any luck so far.

HTML

<!DOCTYPE html>
 <html class="ng-app">
  <head>

   <meta charset="UTF-8">
   <title>Website Name</title>
   <link rel='stylesheet prefetch'href='https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css'>
   <link rel='stylesheet prefetch'href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'>
   <link rel="stylesheet" href="css/style.css">

  </head>
  <body>
   <div ng-controller="HomeCtrl">
    <div class="toggle_menu" ng-click="menu_open = !menu_open" ng-init="menu_open = false"><i class="fa fa-bars"></i></div>
    <div class="main" ng-class="{'has_menu_open': menu_open == true}" ng-init="menu_index = 1">
    <!--HOME PAGE-->
    <div class="bg bg1" ng-class="{'visible': menu_index == 1}">
    </div>
    <!--ABOUT PAGE-->
    <div class="bg bg2" ng-class="{'visible': menu_index == 2}">
    <div class='content'>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu
        urna et leo aliquet malesuada ut ac dolor. Fusce non arcu vel ligula
        fermentum sodales a quis sapien. Sed imperdiet justo sit venenatis
        egestas. Integer vitae tempor enim. In dapibus nisl sit amet purus 
        congue tincidunt. Morbi tincidunt ut eros in rutrum. Sed quam erat, 
        vel tempor et, elementum at tortor. Praesent ac libero at arcu 
        eleifend mollis ut eget sapien. Duis placerat suscipit eros, eu 
        tempor tellus facilisis a. Vivamus vulputate enim felis, a euismod 
        diam elementumnon. Duis efficitur ac elit non placerat. Integer 
        porta viverra nunc,sed semper ipsum. Nam laoreet libero lacus.  
    </div> 
    </div>
    <!--PROJECTS PAGE-->
    <div class="bg bg3" ng-class="{'visible': menu_index == 3}">
    </div>
    <!--Downloads PAGE-->
    <div class="bg bg4" ng-class="{'visible': menu_index == 4}">
    </div>
    <!--UNIC PAGE-->
    <div class="bg bg5" ng-class="{'visible': menu_index == 5}">

    </div>
    </div>
    <div class="menu" ng-class="{'is_open': menu_open == true}">
    <ul>
    <li ng-click="menu_index = 1; menu_open = false;" ng-class="{'active': menu_index == 1}">Home</li>
    <li ng-click="menu_index = 2; menu_open = false;" ng-class="{'active': menu_index == 2}">About</li>
    <li ng-click="menu_index = 3; menu_open = false;" ng-class="{'active': menu_index == 3}">Projects</li>
    <li ng-click="menu_index = 4; menu_open = false;" ng-class="{'active': menu_index == 4}">Downloads</li>
    <li ng-click="menu_index = 5; menu_open = false;" ng-class="{'active': menu_index == 5}">UniC</li>
    </ul>
    </div>
    <div class="copy" ng-class="{'is_visible': menu_open == true}">Made by "NAME HERE"<a href="https://github.com/qwertyn1456" target="_blank"><i class="fa fa-github-square"></i></a></div>
    </div>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.1/angular.min.js'></script>
    <script src="js/index.js"></script>

  </body>
</html>

Sorry I forgot to add my complete CSS file. The CSS file above is the one that does work when used with my HTML. I only want to hide my scrollbar, but still keep it's functionality.

CSS

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700);
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css);
body {
  background: #111115;
  font-family: "Open Sans", sans-serif;
  -webkit-perspective: 600px;
  -moz-perspective: 600px;
  perspective: 600px; }

.toggle_menu {
  background: rgba(255, 255, 255, 0.2);
  z-index: 99999;
  position: absolute;
  top: 50px;
  right: 50px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer; }
  .toggle_menu:active {
    background: rgba(255, 255, 255, 0.3);
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out; }
  .toggle_menu i {
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #fff;
    font-size: 22px; }

.main {
  position: relative;
  z-index: 1;
  width: 100vw;
  height: 100vh;
  -webkit-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out; }
  .main.has_menu_open {
    -webkit-transform: rotateX(-4deg) translate3D(0px, 0px, -100px) scale(.9);
    -moz-transform: rotateX(-4deg) translate3D(0px, 0px, -100px) scale(.9);
    -ms-transform: rotateX(-4deg) translate3D(0px, 0px, -100px) scale(.9);
    -o-transform: rotateX(-4deg) translate3D(0px, 0px, -100px) scale(.9);
    transform: rotateX(-4deg) translate3D(0px, 0px, -100px) scale(.9); }
  .main .bg {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 2;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100vw;
    height: 100vh;
    opacity: 0;
    -webkit-transition: opacity .5s ease-in-out;
    -moz-transition: opacity .5s ease-in-out;
    transition: opacity .5s ease-in-out; }
    .main .bg.visible {
      opacity: 1; }
    .main .bg.bg1 {
      background-image: url(../images/background/home.png); }
    .main .bg.bg2 {
      background-image: url(../images/background/about.jpg); }
    .main .bg.bg3 {
      background-image: url(../images/background/unic.jpg); }
    .main .bg.bg4 {
      background-image: url(../images/background/projectsTwo.jpg); }
    .main .bg.bg5 {
      background-image: url(../images/background/projects.jpg); }

.menu {
  position: fixed;
  z-index: 99;
  background: #292931;
  bottom: 0px;
  left: 10%;
  right: 10%;
  width: 80%;
  height: 110px;
  -webkit-transform: translate3D(0px, 150px, 0px) rotateX(45deg) scale(0.9);
  -moz-transform: translate3D(0px, 150px, 0px) rotateX(45deg) scale(0.9);
  -ms-transform: translate3D(0px, 150px, 0px) rotateX(45deg) scale(0.9);
  -o-transform: translate3D(0px, 150px, 0px) rotateX(45deg) scale(0.9);
  transform: translate3D(0px, 150px, 0px) rotateX(45deg) scale(0.9);
  -webkit-transition: all .75s ease-in-out;
  -moz-transition: all .75s ease-in-out;
  transition: all .75s ease-in-out; }
  .menu.is_open {
    -webkit-transform: translate3D(0px, 0px, 0px) rotateX(2deg) scale(1);
    -moz-transform: translate3D(0px, 0px, 0px) rotateX(2deg) scale(1);
    -ms-transform: translate3D(0px, 0px, 0px) rotateX(2deg) scale(1);
    -o-transform: translate3D(0px, 0px, 0px) rotateX(2deg) scale(1);
    transform: translate3D(0px, 0px, 0px) rotateX(2deg) scale(1); }
  .menu ul {
    position: relative;
    margin: 0px;
    padding: 20px;
    height: 70px;
    width: 100%;
    box-sizing: border-box;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex; }
    .menu ul li {
      margin: 10px;
      list-style: none;
      height: 50px;
      line-height: 50px;
      text-align: center;
      color: #eee;
      font-size: 20px;
      font-weight: 300;
      background: rgba(238, 238, 238, 0.075);
      cursor: pointer;
      -webkit-transition: all .25s ease-in-out;
      -moz-transition: all .25s ease-in-out;
      transition: all .25s ease-in-out;
      -webkit-font-smoothing: antialiased;
      -webkit-box-flex: 1;
      -moz-box-flex: 1;
      box-flex: 1;
      -webkit-flex: 1;
      -moz-flex: 1;
      -ms-flex: 1;
      flex: 1; }
      .menu ul li.active {
        color: palegoldenrod; }
      .menu ul li:hover {
        background: rgba(238, 238, 238, 0.15);
        -webkit-transform: translate3D(0px, 0px, 0px) scale(1.05);
        -moz-transform: translate3D(0px, 0px, 0px) scale(1.05);
        -ms-transform: translate3D(0px, 0px, 0px) scale(1.05);
        -o-transform: translate3D(0px, 0px, 0px) scale(1.05);
        transform: translate3D(0px, 0px, 0px) scale(1.05); }

.copy {
  font-family: moon;
  font-weight: 100;
  bottom: 10px;
  letter-spacing: 4px;
  font-size: 20px;
  width: 100vw;
  text-transform: uppercase;
  text-decoration: none;
  position: fixed;
  width: 100%;
  height: 30px;
  line-height: 20px;
  top: 20px;
  left: 0px;
  right: 0px;
  z-index: 999;
  text-align: center;
  color: #fff;
  -webkit-transform: translate3D(0px, -70px, 0px);
  -moz-transform: translate3D(0px, -70px, 0px);
  -ms-transform: translate3D(0px, -70px, 0px);
  -o-transform: translate3D(0px, -70px, 0px);
  transform: translate3D(0px, -70px, 0px);
  -webkit-transition: all .75s ease-in-out;
  -moz-transition: all .75s ease-in-out;
  transition: all .75s ease-in-out; }
  .copy a, .copy a:visited, .copy a:active {
    margin-left: 10px;
    color: gold; }
  .copy.is_visible {
    -webkit-transform: translate3D(0px, 0px, 0px);
    -moz-transform: translate3D(0px, 0px, 0px);
    -ms-transform: translate3D(0px, 0px, 0px);
    -o-transform: translate3D(0px, 0px, 0px);
    transform: translate3D(0px, 0px, 0px); }

/*---------------------------------------*/
.content {
  /* These rules create an artificially confined space, so we get
     a scrollbar that we can hide. They are not part of the hiding itself. */

  border: 1px dashed gray;
  padding: .5em;

  white-space: pre-wrap;
  height: 5em;
  overflow-y: scroll;
}

.content::-webkit-scrollbar {
  /* This is the magic bit */
  display: none;
}
/*---------------------------------------*/
                  /*Box Info*/
       /* .box div holds the bottom image */
      .box {
        background: white;
        margin-bottom: 10px;
        padding: 0 0 15px;
        width: 50%;
     }

     /*  this is the title h3 tag and contains the background
         image for the title    */

      .box h3 {
        background: white;
        color: #000;
        text-align: left;
        font-size: 17px;
        height: 35px;
        line-height: 30px;
        margin: 0;
        padding: 0 15px;
     }

     /* The paragraph tag contains the side borders mark-up */

     .box p  {
        font-family: moon;
        text-align:left;
        font-weight: 100;
        font-size: 20px;
        letter-spacing: 2px;
        width: 90%;
        text-decoration: none;
        background: #ffffff none repeat scroll 0 0;
        color: #444444;
        line-height: 1.3em;
        margin: 0;
        padding: 15px 14px 0;
     }

JS File

function HomeCtrl ($scope) {
  $scope.test = "aaa"
}
Nicky Portheine
  • 1
  • 1
  • how is it not working? – bowl0stu Jul 26 '17 at 17:45
  • Please update all css file. It seems conflict in anywhere – HuyTran Jul 26 '17 at 17:45
  • The scrollbar seems to be hidden properly for me: [**Fiddle**](https://jsfiddle.net/d648fb7z/) (unless I don't understand what you're trying to do) – trevorp Jul 26 '17 at 17:48
  • I'm assuming you want to keep the scrolling functionality, but remove the actual scroll bar. Declaring `-webkit-scrollbar` will only hide the scroll bar in webkit based browsers (chrome, safari). Read this for more information https://stackoverflow.com/questions/6165472/custom-css-scrollbar-for-firefox – bowl0stu Jul 26 '17 at 17:52
  • bowl0stu, yes I only want to hide my scrollbar and keep it's functionality. See these pictures to what i mean with not working properly. http://imgur.com/a/zvc36 – Nicky Portheine Jul 27 '17 at 11:10
  • Could you create a minimum verifiable example? There are a lot of styles in there that either shouldn't affect scrolling behavior or visibility. – instantepiphany Jul 27 '17 at 15:36

0 Answers0