Stacks Image 1101687

Scroll Scope

UTILITY STACK
STACK DETAILS:
  • BROWSER: IE9+, CHROME, FIREFOX, SAFARI
  • REQUIREMENTS: STACKS 3+
  • STACK VERSION: 1.1.4
PURCHASE INCLUDES:
  • 1 YEAR FREE UPDATES
  • 1 YEAR FREE SUPPORT

Overview

Scroll Scope allows scrolling to it's boundary while keeping the document still. Commonly in scroll interaction, user hovers a mouse cursor over a scrollable element and uses trackpad or mouse wheel to scroll the element. When an element reaches its boundary, its parent element continues scrolling.
Usually this means that the user will continue moving down the page when attempting to interact with an specific container. This is a common issue with dropdown menus and modal dialogs. This behaviour is most prevalent in desktop browsers. Scroll Scope is designed to fix this issue.

Interface

Stacks Image 3211
Enable: Enable/disable all Scroll Scope functions.

Container Height: Set a maximum height for the Scroll Scope container.

Advanced Settings:
Enable/disable events for advanced implementation: DomMouseScroll, mousewhell, scroll, touchstart, touchmove.

Demos

Default Behaviour

Default behaviour: scroll to the end of this box end all document will scroll.

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

Scroll Scope

Scroll Scope: scroll to the end of this box and the document will not scroll.

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
Great for code blocks! A page with lots of code blocks can have distinct heights.

pre {
overflow: auto;
max-height: 16em;
}

code {
display: inline-block;
color: #555;
background-color: #f6f6f6;
border-radius: 3px;
padding-left: 0.3em;
padding-right: 0.3em;
}

pre code {
display: block;
padding: 1em;
overflow: auto;
}
Modal implementations tend to scroll the document. Scroll Scope is ideal for modal dialog boxes.
In this example we just drop the modal stack inside a Scroll Scope stack and the document will not scroll at the end of the modal's content.