New:Microsoft Teams Notifications Are Now Available in Socket.Learn more
Get Started

awesome-scroll-container

Package Overview
Dependencies
Maintainers
1
Versions
10
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

awesome-scroll-container

This project was perfect scroll container components

Source
npmnpm
Version
0.0.2
Version published
Weekly downloads
11
37.5%
Maintainers
1
Weekly downloads
 
Created
Source

AwesomeScroll

滚动容器:

  • 相较于setInterval思路实现循环滚动,requestAnimationFrame不会造成丢帧现象以及动画卡顿;
  • requestAnimationFrame是由系统的时间间隔定义的。大多数浏览器的刷新频率是60Hz(每秒钟反复绘制60次),
  • 循环间隔是1000/60,约等于16.7ms。大多数浏览器会对反复挥着这个操作加以限制,不能超过60HZ,
  • 即使人为设置超过了该值,效果也不会改善。requestAnimationFrame()保证了最佳的绘制效率
  • 并且相较于setInterval或者setTimeout不会因为鼠标hover或者滚动而产生跳动画面,效果更流畅。

Getting Started with Create React App

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

yarn start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

yarn test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

yarn build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

yarn eject

Note: this is a one-way operation. Once you eject, you can’t go back!

If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.

You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.

Learn More

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

Description

如果该项目启动页面没有正常显示,这个问题是因为浏览器安装了react-devtools扩展程序导致的 找到node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js这个文件, 找到报错的代码,直接注释导致报错的那一行:RefreshRuntime.injectIntoGlobalHook(safeThis); 然后重启, 这个报错,也是跟react版本有很大关系,记得老得版本好像不会出现这个问题。 另外对于webpack的版本可能启动出现相关版本问题,按指定版本安装即可:npm i webpack@4.44.2 -D

FAQs

Package last updated on 19 Oct 2021

Related posts