CODEWITHSUNDEEP
htmlcss
gwiz_kid
gwiz_kid

Reputation: 63

How would I remove the scroll bounce on the overall window while maintaining scroll capability?

I tried the "hidden" overflow property but that completely removes the scrolling capability; as well as, fixing the first_block in place. When the overflow property is on "scroll" all of the divs are visible. 

html{
overflow: hidden;
}

body{
height: 100%;
width: 100%
overflow-x: hidden;
overflow-y: auto;
}

div#container{
height: 100%;
}

div#static_nav{
text-align: right;
}

div#block_one{
height: 100vh;
}

div#block_two{
height: 100vh:
}

Here is the HTML

Here, the first_block div content is displayed but each individual div should be 100vh(from the css). I'm not quite sure how to remedy this.

<head>
<link rel = "stylesheet" type = "text/css" href = "tof_css.css" />
<script src ="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?
family=Kanit|Heebo|Source+Sans+Pro">
</head>

<body>
<div id = "container">

<header>
  <div id = "static_nav">
    <nav class = "navbar">
      <a href = "block_one">HOME</a>
      <a href = "block_two">ABOUT</a>
      <a href = "block_four">PEOPLE</a>
      <a href = "block_five">CONTACT</a>
      <a href = "">LOG IN</a>
    </nav>
  </div>
</header>

<div id = "block_one">
test 1
</div>

<div id = "block_two">
test 2
</div>

<div id = "block_three">
test 3
</div>

<div id = "block_four">
test 4
</div>

<div id = "block_five">
test
</div>

</div>
</body>

Upvotes: 0

Views: 61

Answers (2)

gwiz_kid
gwiz_kid

Reputation: 63

I realized that the issue I was having was due to height of the body being set to 100%; meaning the body could NOT exceed the parameters of the browser window, so there would be no overflow. Setting the body height to 100vh makes the height relative to the browser not equal to it thus allowing for overflow conditions.

Upvotes: 0

pol
pol

Reputation: 2701

You have a mistake on the last line in the CSS, you have colon : intead of a semicolon ;

BTW, keep it simple
JSfiddle: jsfiddle.net/pg0tpg05

body {
  margin: 0; /* remove default margin */
}

div#static_nav {
  text-align: right;
}

#container > div {
  height: 100vh;
}
<div id="container">

  <header>
    <div id="static_nav">
      <nav class="navbar">
        <a href="block_one">HOME</a>
        <a href="block_two">ABOUT</a>
        <a href="block_four">PEOPLE</a>
        <a href="block_five">CONTACT</a>
        <a href="">LOG IN</a>
      </nav>
    </div>
  </header>

  <div id="block_one">
    test 1
  </div>

  <div id="block_two">
    test 2
  </div>

  <div id="block_three">
    test 3
  </div>

  <div id="block_four">
    test 4
  </div>

  <div id="block_five">
    test
  </div>

</div>

Upvotes: 1

Related Questions