This is a buggyfill (fixing bad behavior), not a polyfill (adding missing behavior). That said, it provides hacks for you to get viewport units working in old IE and Android Stock Browser as well. If the browser doesn't know how to deal with the viewport units - vw, vh, vmin and vmax - this library will not improve the situation unless you're using the hacks detailed below. The buggyfill uses the CSSOM to access the defined styles rather than ship its own CSS parser, that'S why the hacks abuse the CSS property content to get the values across. The buggyfill iterates through all defined styles the document knows and extracts those that uses a viewport unit. After resolving the relative units against the viewport's dimensions, CSS is put back together and injected into the document in a <style> element. Listening to the orientationchange event allows the buggyfill to update the calculated dimensions accordingly.
ios safari viewportThe best supported, easiest to use react media query module. This module is pretty straightforward: You specify a set of requirements, and the children will be rendered if they are met. Also handles changes so if you resize or flip or whatever it all just works.
css react-component viewport react mobile media-queries respond media-query matchmedia responsive componentA light library that does stuff when the matched elements enter or leave the viewport. Tested to work in IE9+, Edge, Gecko, Blink, and Webkit. Hint: demos now have their own repository. Be sure to check them out.
on-screen viewport element-position-relative-to-viewport element-in-viewport element-inside-viewport enter-viewport leave-viewportThis library is a part of Kissui project. You can also download and include files manually from the latest releases.
animation animations-scrollanim viewport css3 scroll html5 kissuiDragscroll is a micro JavaScript library (910 bytes minified) which enables scrolling via holding the mouse button ("drag and drop" or "click and hold" style, online demo). It has no dependencies and is written in vanilla JavaScript (which means it works anywhere). That's it! Now you can scroll it by dragging. You can also add the dragscroll class to the <body> element and drag the whole page.
scrolling dragscroll enables-scrolling mouse scroll micro-library drag hold drag-n-drop drag-and-drop click-n-hold click-and-hold viewportGet notified when a DOM element enters or exits the viewport. A small (~1.9kb gzipped), dependency-free, javascript utility for IE9+. With in-view, you can register handlers that are called when an element enters or exits the viewport. Each handler receives one element, the one entering or exiting the viewport, as its only argument.
utility viewportThis is a favorites, with a mobile web tips.
favorites css html5 iphone html5-css3 zepto android retina viewportThe scroll monitor allows you to receive events when elements enter or exit a viewport. It does this using watcher objects, which watch an element and trigger events. Watcher objects also contain information about the element they watch, including the element's visibility and location relative to the viewport. If your scroll container is an element other than the body you can create a container that creates watchers. The scroll monitor was designed to be very fast. On each scroll event the DOM is only touched twice, once to find the document height and again to find the viewport top. No variables are declared, nor are any objects, arrays, or strings created. Watchers are very cheap. Create them liberally.
scroll dom viewportAn ultra-light jQuery plugin that tells you if the element is in the viewport, but with a twist. For a more performant alternative, please take a look at observe-element-in-viewport which uses the new IntersectionObserver API. Please keep in mind that you might have to ship a polyfill for IntersectionObserver depending on the browsers you support.
jquery-plugin viewportViewport is a component to ease viewport management. You can get the dimensions of the viewport and beyond, which can be quite helpful to perform some checks with JavaScript. Also, you can use it without components.
viewport dimensions device window coordinateshome page of intence project also uses viewport.js for its navigation menu. where should the viewport be scrolled to in order to show a particular section.
scroll scrolling menu navigation indicator location viewportView (minimal-ui) manager for iOS 8. Try it and tweet it if you like it.
minimal-ui ios fullscreen mobile viewportDynamic viewport management for mobile. Manage viewport in different states of device orientation. Scale document to fit viewport. Calculate the dimensions of the minimal iOS 8 view relative to your viewport width.
viewport fullscreen minimal iosAnimation library that mimics CSS keyframes when scrolling.
typescript css css-animations keyframes animation scroll viewport parallax domAll of the above offer the same features. Although this plugin is still actively maintained, it will eventually be made obsolete by the Intersection Observer API. You can check the current state of browser compatibility at caniuse.com. Meanwhile, withinviewport will continue to work on current and legacy browsers.
viewport browser viewport-dimensions within-viewport detect event infinite-scroll scroll view windowA jQuery plugin that creates a stacking effect by sticking panels as they reach the top of the viewport. First include jQuery, then call .stickyStack() on the main content wrapper (or define it using options). Note that the stackingElements should be direct children of the containerElement.
viewport jquery-plugin stacking-panels stacking sticking-panels scroll-effect scroll-effects responsivejQuery plugin that adds a CSS class to selected elements when they have been scrolled into the viewport for the first time.
jquery-plugin visible scroll viewportjQuery scroll-into-view plugin
jquery-plugin scroll range viewportA plugin to check if an element is within the browser's viewport.
jquery-plugin viewport scrollOnly renders items visible in the current viewport.
preact viewport virtual virtual-scroll virtualized scroll
We have large collection of open source products. Follow the tags from
Tag Cloud >>
Open source products are scattered around the web. Please provide information
about the open source projects you own / you use.
Add Projects.