Issue #292 (scrollTo(), JS Utils, Frameworks, Uncats)02/21/19
For the longest time, custom window and element scrolling was done using a library like jQuery, sometimes along with a plugin. Nowadays there are ways to do smooth scrolling using both native DOM techniques and CSS. The DOM/JavaScript technique, which I'll discuss here, uses the scrollTo() method.
Normally, you'll see scrollTo() looking something like this:
|
window.scrollTo(0, 2000);
|
This line would scroll the page 2000 pixels from the top of the viewport. You have to provide two arguments in order for this to work, one is the horizontal axis and the second is the vertical axis (the more commonly used one).
But there are a few other little tidbits to note about the scrollTo() method.
First, scrollTo() can be invoked not just on the window but on an element. So if a specified element (like a div) is scrollable using a combination of overflow:auto and some overflowing content, then scrollTo() works on that the same way.
Another thing to note is that the arguments passed into scrollTo() can also be expressed as a scrollToOptions object that has three possible properties. Here's an example:
|
window.scrollTo({
left: 0,
top: 2500,
behavior: 'smooth'
});
|
As you can see, scrollToOptions can specify the amount to scroll from the left and from the top (which is the same thing I did previously) along with a behavior value. The behavior indicates if I want the scrolling to occur smoothly (like an animated scroll) or abruptly (which is the default, and which is similar to what happens using in-page target links in HTML).
This CodePen demo uses the scrollToOptions object to do some user-defined custom scrolling. Type a number into the box at the top of the demo and use the select element to choose whether you want the scroll to be 'smooth' or 'auto'.
One last thing to note is that the scrollToOptions object is valid for three different scroll-related methods: scroll(), scrollBy(), and scrollTo(). All three can be invoked on the window or on an element.
Now on to this week's tools!
|
JavaScript Utilities
DeepScan: How to Ensure JavaScript Code Quality
Make your JavaScript better with advanced static analysis. DeepScan targets the detection of possible runtime errors and quality issues for your JavaScript, TypeScript, React and Vue.js code. sponsored via Paved
omniclone
An isomorphic and configurable JavaScript utility for object deep cloning that supports circular references.
Arg
Yet another command line option parser. Simple argument parsing.
virtual-scroller
Maps a provided set of JavaScript objects onto DOM nodes, and renders only the DOM nodes that are currently visible, leaving the rest “virtualized”.
JSBI
A pure JavaScript implementation of the official ECMAScript BigInt proposal.
tab-container
An accessible tab component with keyboard support. Follows ARIA best practices for tab-based UI elements.
Rallax.js
Dead-simple parallax scrolling.
quicklink
Faster subsequent page-loads by prefetching in-viewport links during idle time.
mOcKiNgCaSe
Converts a string to "mocking" case, similar to how the tool's name is stylized.
nanoresource
Small module that helps you maintain state around resources.
ReX.js
Your RegEx companion. Library for writing complex regular expressions with the help of auto-completion.
|
Front-end Frameworks
Pramp - Free frontend interview practice
Can you ace a frontend interview? Make sure you can. Pramp, a peer-2-peer mock interviews platform allows you to practice for free. We'll make sure you'll get to practice with other awesome coders like yourself. sponsored
HTMLTEMPLATES.CO
Free HTML website templates and UI Kits to kickstart your next project.
Raster
Minimal and straight-forward CSS grid system utilizing descriptive HTML rather than semantic CSS.
React + Three JS Boilerplate
A minimalistic and extendable React + Three.js boilerplate to get you started with WebGL in the browser in no time.
react-boiler-plate
CodePen development style for React in VSCode.
Treats
An easily extensible, feature-rich Node+React framework with no need to configure webpack, Babel, or any other build tools.
Destyle.css
Opinionated reset stylesheet that provides a clean slate for styling your HTML.
Static Site Boilerplate
A better workflow for building modern static websites. Automated build processes, a local development server, production minification and optimizations, and the latest standards for static websites.
Terminal CSS
A modern and minimal CSS framework for terminal lovers.
Architect
The simplest, most powerful way to build serverless applications.
Redux Starter Kit
A simple batteries-included tool set to make using Redux easier.
FBT
A powerful, flexible, and intuitive framework for internationalizing user interfaces in JavaScript.
|
|
Recommended Reading for Developers
|
The Uncategorizables
Pramp - Free frontend interview practice
Can you ace a frontend interview? Make sure you can. Pramp, a peer-2-peer mock interviews platform allows you to practice for free. We'll make sure you'll get to practice with other awesome coders like yourself. sponsored
Flatfile
Import CSV files to any web app (Ruby, SQL, PHP, API, and more). Create a delightful data import experience for your customers without weeks of development.
txti
Fast web pages for everybody. A service that allows anyone to post or read simple content that's not on a bloated web page or app.
.dev Domains
Google's early access program for acquiring a .dev domain name. Much more expensive if you reserve one prior to February 28.
CloudQuery
Turn any website into a serverless API (with SPA support).
Emoji Builder
Online tool to build a custom emoji and then download it in PNG format.
Micro Snitch
Mac app. Ultra-light menu bar application that runs inconspicuously in the background and reports any microphone and camera activity to help you figure out if someone’s spying on you.
Wedding Website
A beautiful, feature rich, device-friendly wedding website template.
reCAPTCHA
Google's ubiquitous bot-stopping service is now at version 3.
VisBug
Make any webpage feel like an artboard with this Chrome extension.
Primer
Resources, tooling, and design guidelines for building interfaces with GitHub’s design system.
|
|
