CSS question- scroll bar missing

k3lit0 · August 2015

For some reason the ability to scroll has vanished from my game. I'm trying to get the CSS fixed but i don't see what's wrong. I tried changing 'overflow' to visible and it didn't do anything.

/* stylesheet */
head {
  box-shadow: inset 0px 0px 30em #bbb;
  width:100%;
  height:100%;
  display:block;
  position:fixed;
}
head * {
  display:none;
}

body {
	/* override defaults */
	margin: 0;
}

/* background image */ 
html {
 background: [img["file:///C:/Users/Christopher/Documents/Twine/Twine%202/images/219122.jpg"]] fixed;
 background-size: cover; 
 min-height: 100%;
 min-width:100%;
 height:100%;
}

/* sets a class for changing background */ 
html.Vampire {
		background: [img["file:///C:/Users/Christopher/Documents/Twine/Twine%202/images/3113739.jpg"]] fixed;
 background-size: cover; 
 min-height: 100%;
 min-width:100%;
 height:100%;
}

/* sets a class for changing background */ 
html.Hunter {
		background: [img["file:///C:/Users/Christopher/Documents/Twine/Twine%202/images/1339106.jpg"]] fixed;
 background-size: cover; 
 min-height: 100%;
 min-width:100%;
 height:100%;
}

/* Dialogue option look */
#passages .options a.link-internal {
	display: inline-block;
	width: 8em;
	background-color: white;
	color: #666666;
	margin-right: 2em;
	text-align: center;
}

#passages .options a.link-internal:last-of-type {
	margin-right: 0;
}


/* disables the sidebar on the menu screen */ 
body.menu #ui-bar {
	display: none;
}

#passages {
	margin: 1%;
	top: 3;
	left: 3;
	right: 3;
	bottom: 10em;
	position: fixed;
}
.passage {
	margin-top: 3.5em;
	margin-right: 0;
  font: 1.35em/1.15em Garamond, Georgia, serif;
  color: #FFF;
  text-align:justify;
}

/* bottom bar */
#linkbar {
	position: fixed;
	overflow: hidden;
	z-index: 10;
	left: 11em;
	right: 0;
	bottom: 2.5em;
	margin-right: 16%;
	text-align:center;
	max-height: 4.5em;
}

#linkbar .options a.link-internal {
	display: inline-block;
	width: 8em;
	background-color: white;
	color: #666666;
	margin-right: 2em;
	text-align: center;
	font: 1.65em/1.15em Garamond, Georgia, serif;
}

/* popups */
#ui-body.popup
{
	padding: 40px; 
	border-radius: 15px; 
	border-color: #000;
	font-style: italic; 
	color: #111;
	background-color: #f1efef;
	max-width: 600px; 
	box-shadow: inset 0 0 2em black, 0 0 2em black, 0 0 5em rgba(0,0,0,0.3);
	line-height: 1.5;
  -webkit-transition: none;
  transition: none;
} 

/* Links in the main passage */
.link-popup
{
	color: #8A0808; 
}

/* Link Text */
a
{
  color: #d3d3d3;
}

/* sidebar code */ 
#ui-bar {
	background-color: rgba(34,34,34,0.25);
	width: 200px;
	font-family: Garamond, "Helvetica Neue", Arial, sans-serif;
}


#sidebar {
	color:#fff;
  display:table;
  position:fixed;
	padding-top: 5%;
	font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
	text-align:left
	font-size: 1em;
	left: 0.5em;
	width: 4%;
}
#sidebar #title {
  display:table-cell; 
  vertical-align:middle;
  text-align:center;
}
#sidebar #title #storyTitle {
  font: bold 2em/1.25em Helvetica, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: -0.05em;
  color:rgba(0,0,0,0.15);
}
#title :not(#storyTitle){
  display:none;
}
#storymenu, #snapback, #restart, #share, #credits {
  display:none;
}
a.internalLink:hover, a.externalLink:hover {
  color:#de0000 !important;
  text-decoration: none;
}
a.internalLink:nth-child(3n), a.externalLink:nth-child(3n) {
  color: #666;
}
a.internalLink:nth-child(3n+1), a.externalLink:nth-child(3n+1) {
  color: #777;
}
a.internalLink:nth-child(3n+2), a.externalLink:nth-child(3n+2) {
  color: #888;
}
@media screen and (max-width: 960px) {
  body { font-size: 50%; }
}
@media screen and (max-width: 840px) {
  body { font-size: 40%; }
}
@media screen and (max-width: 720px) {
  body { 
    font-size: 30%;
  }
}
/* Increase viewport utilization as its size decreases. */
@media screen and (max-width: 1440px) {
	#passages {
		/* override defaults */
		margin-right: 0;
	}
	.passage, #linkbar {
		margin-right: 8%;
	}
}
@media screen and (max-width: 1136px) {
	body {
		/* override defaults */
		margin: 0;
	}
	#passages {
		left: 15em;
		bottom: 10%;
	}
	.passage, #linkbar {
		margin-right: 10%;
	}
	#linkbar {
		left: 15em;
		bottom: 2.5%;
	}
}

I want the passage to start far left enough for the sidebar to not cover any of it, and far up enough that the bottom link bar doesn't overlap either. It took a lot of adjusting but it looks ok now, unfortunately I can't scroll to see text. It just drops me at the bottom of the page.

Claretta · August 2015

Scrollbars don't naturally work with position: fixed.

You could try putting in something like

overflow-y:auto;

in your #passages css.

Though I would try to explore other layout solutions than using position:fixed for everything.

TheMadExile · August 2015

First off, you have several non-functional selectors, which match nothing in SugarCube.

As Claretta mentioned, making #passages fixed is what broke body element scrolling, because you removed #passages from its layout. You also have other issues there (namely the values for top, left, and right are all invalid).

It should be something like this:

#passages {
	position: fixed;
	top: 3px; /* or 3em; unsure which unit you were planning on */
	left: 3px; /* etc */
	right: 3px; /* etc */
	bottom: 10em;
	margin: 1%;
	overflow: auto;
}

I've no idea what you're going for, so maybe what you're trying to do is the only way to achieve it, however, if at all possible, I'd recommend finding another way to accomplish what you're seeking rather than making #passages fixed and jamming a scrollbar onto it.

k3lit0 · August 2015

I sort of combined different code to make this, I am "winging it" so thanks.

I don't know if I need the position: fixed, I probably had it there because the stylesheet I started at did. I'll try to change that. Thanks!

Categories

CSS question- scroll bar missing

Comments