majido/.blocks

## .blocks
border: yes
height: 600
scrolling: yes
license: mit


## README.md

      
    Raw
  

              README.md
            
          
    Description

This is a simple scroll boundary behavior demo that shows how the property impact scroll propagation and overscroll afforfances.
Instruction

Just try scrolling each scroller and observe propagation of scroll to document viewport.

  
## index.html
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width">
  <title>Simple demo page for scroll-boundary-behavior</title>
</head>
<style>
  html {
    overflow: scroll;
    font-size: 36px;
  }

  container {
    position: fixed;
    top: 200px;
    height: 50%;
    width: 100%;

    display: flex;
    flex-direction: row;
  }

  .scroller {
    overflow: scroll;
    margin: 1%
  }

  .scroller > div {
    text-wrap: break-word;
    width: 3000px;
    height: 3000px;
    background: linear-gradient(to bottom right, white, blue);
  }

  .filler {
    width: 5000px;
    height: 5000px;
    background: linear-gradient(to bottom right, white, green);
  }
</style>

<div class="filler">
  Scroll document and then scroll any of the fixed position scroller.
  <br> Depending on scroll-boundary-behavior, the scroll propagates to
  document or not.
</div>

<container>
  <div class="scroller" style="scroll-boundary-behavior: none;">
    <div>SBB: none
       <br> ❌ scroll propagation
       <br> ❌ overscroll affordance
    </div>
  </div>

  <div class="scroller" style="scroll-boundary-behavior: contain;">
    <div>SBB: contain
       <br> ❌ scroll propagation
       <br> ✅ overscroll affordance
   </div>
  </div>

  <div class="scroller" style="scroll-boundary-behavior: auto;">
    <div>SBB: auto
       <br> ✅ scroll propagation
       <br> ✅ overscroll affordance
    </div>
  </div>

  <div class="scroller" style=" scroll-boundary-behavior-y: none; scroll-boundary-behavior-x: auto;">
    <div>SBB-y: none; SBB-x: auto;
       <br> ❌ vertical scroll propagation
       <br> ✅ horizontal scroll propagation
       <br> ✅ overscroll glow
    </div>
  </div>

</container>


</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="viewport" content="width=device-width">
	<title>Simple demo page for scroll-boundary-behavior</title>
	</head>
	<style>
	html {
	overflow: scroll;
	font-size: 36px;
	}

	container {
	position: fixed;
	top: 200px;
	height: 50%;
	width: 100%;

	display: flex;
	flex-direction: row;
	}

	.scroller {
	overflow: scroll;
	margin: 1%
	}

	.scroller > div {
	text-wrap: break-word;
	width: 3000px;
	height: 3000px;
	background: linear-gradient(to bottom right, white, blue);
	}

	.filler {
	width: 5000px;
	height: 5000px;
	background: linear-gradient(to bottom right, white, green);
	}
	</style>

	<div class="filler">
	Scroll document and then scroll any of the fixed position scroller.
	<br> Depending on scroll-boundary-behavior, the scroll propagates to
	document or not.
	</div>

	<container>
	<div class="scroller" style="scroll-boundary-behavior: none;">
	<div>SBB: none
	<br> ❌ scroll propagation
	<br> ❌ overscroll affordance
	</div>
	</div>

	<div class="scroller" style="scroll-boundary-behavior: contain;">
	<div>SBB: contain
	<br> ❌ scroll propagation
	<br> ✅ overscroll affordance
	</div>
	</div>

	<div class="scroller" style="scroll-boundary-behavior: auto;">
	<div>SBB: auto
	<br> ✅ scroll propagation
	<br> ✅ overscroll affordance
	</div>
	</div>

	<div class="scroller" style=" scroll-boundary-behavior-y: none; scroll-boundary-behavior-x: auto;">
	<div>SBB-y: none; SBB-x: auto;
	<br> ❌ vertical scroll propagation
	<br> ✅ horizontal scroll propagation
	<br> ✅ overscroll glow
	</div>
	</div>

	</container>


	</html>