{"id":327872,"date":"2022-01-12T15:00:07","date_gmt":"2022-01-12T15:00:07","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=327872"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=327872","title":{"rendered":"<span>\u041a\u0430\u043a \u043f\u043e\u0431\u0435\u0434\u0438\u0442\u044c scroll \u0432 javascript<\/span>"},"content":{"rendered":"<div><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/9e6\/5b5\/314\/9e65b531459d357ec587cf2918d660a9.jpg\" width=\"600\" height=\"600\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/9e6\/5b5\/314\/9e65b531459d357ec587cf2918d660a9.jpg\" data-blurred=\"true\"\/><figcaption><\/figcaption><\/figure>\n<p>\u041f\u0440\u0438\u0432\u0435\u0442, \u0425\u0430\u0431\u0440! <\/p>\n<p>\u041d\u0430\u0447\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u0443\u044e \u0441\u0442\u0430\u0442\u044c\u044e \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0431\u044b \u0441 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u043b\u0438\u0440\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u043e\u0442\u0441\u0442\u0443\u043f\u043b\u0435\u043d\u0438\u044f. \u041d\u0435\u0434\u0430\u0432\u043d\u043e, \u0432 \u043e\u0447\u0435\u0440\u0435\u0434\u043d\u043e\u0439 \u0440\u0430\u0437 \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u0432\u0448\u0438\u0441\u044c \u0441\u043e \u0441\u043b\u043e\u0436\u043d\u044b\u043c \u043a\u0435\u0439\u0441\u043e\u043c \u043d\u0430 \u0440\u0430\u0431\u043e\u0442\u0435 \u0438 \u043f\u0440\u043e\u0448\u0435\u0440\u0441\u0442\u0438\u0432 \u0434\u043e\u0431\u0440\u0443\u044e \u043f\u043e\u043b\u043e\u0432\u0438\u043d\u0443 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0430 \u0432 \u043f\u043e\u0438\u0441\u043a\u0430\u0445 \u0438\u0441\u0442\u0438\u043d\u044b, \u043f\u043e\u043f\u0443\u0442\u043d\u043e \u043f\u0440\u0438\u043e\u0431\u0440\u0435\u0442\u044f \u0441 \u0434\u0435\u0441\u044f\u0442\u043e\u043a \u0441\u0435\u0434\u044b\u0445 \u0432\u043e\u043b\u043e\u0441, \u0443 \u043c\u0435\u043d\u044f \u043d\u0430\u0447\u0430\u043b\u043e \u0431\u043e\u043b\u0435\u0442\u044c \u0441\u0435\u0440\u0434\u0435\u0447\u043a\u043e \u0437\u0430 \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0449\u0438\u0445 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0441\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u044b\u0431\u0440\u0430\u043b\u0438 \u043d\u0435\u043b\u0435\u0433\u043a\u0438\u0439 \u043f\u0443\u0442\u044c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 JS. \u041a\u0430\u043a \u0432\u044b, \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e, \u0434\u043e\u0433\u0430\u0434\u0430\u043b\u0438\u0441\u044c, \u0441\u0430\u043c \u044f \u043d\u0435 \u043e\u0442\u043d\u043e\u0448\u0443\u0441\u044c \u043a \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438 \u043b\u044e\u0434\u0435\u0439 &#8216;\u0412 \u0434\u0435\u0442\u0441\u0442\u0432\u0435 \u043c\u0430\u043c\u0430 \u0432\u043a\u043b\u044e\u0447\u0430\u043b\u0430 \u043c\u043d\u0435 \u0432\u043c\u0435\u0441\u0442\u043e \u043c\u0443\u043b\u044c\u0442\u0438\u043a\u043e\u0432 \u043a\u0443\u0440\u0441\u044b Javascript \u0434\u043b\u044f \u0441\u0430\u043c\u044b\u0445 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0445, \u0432 5 \u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043b \u0441\u0432\u043e\u0439 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442 \u043c\u0430\u0433\u0430\u0437\u0438\u043d,\u0430 \u0432 10 \u0432 \u043f\u0435\u0440\u0432\u044b\u0439 \u0440\u0430\u0437 \u0432\u0437\u043b\u043e\u043c\u0430\u043b \u0441\u0430\u0439\u0442 \u041f\u0435\u043d\u0442\u0430\u0433\u043e\u043d\u0430&#8217;. \u0423\u0434\u0438\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e, \u043d\u043e \u043d\u0430 \u043f\u043e\u0445\u043e\u0436\u0438\u0435 \u0440\u0435\u0437\u044e\u043c\u0435 \u044f \u043d\u0435 \u0440\u0430\u0437 \u043d\u0430\u0442\u044b\u043a\u0430\u043b\u0441\u044f \u043d\u0430 \u043f\u0440\u043e\u0441\u0442\u043e\u0440\u0430\u0445 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0430, \u0442\u0435 \u0441\u0430\u043c\u044b\u0435 25-\u0442\u0438 \u043b\u0435\u0442\u043d\u0438\u0435 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0441\u0442\u044b \u0441 22-\u0445 \u043b\u0435\u0442\u043d\u0438\u043c \u043e\u043f\u044b\u0442\u043e\u043c \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0442 \u0438, \u043d\u0430\u0432\u0435\u0440\u043d\u043e\u0435, \u043d\u0435 \u0438\u043c\u0435\u044e\u0442 \u0442\u0435\u0445 \u043f\u0440\u043e\u0431\u043b\u0435\u043c, \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0441\u0442\u0430\u043b\u043a\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u043c\u043d\u0435 &#8212; \u0447\u0435\u043b\u043e\u0432\u0435\u043a\u0443, \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0434\u0430\u0451\u0442\u0441\u044f \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043d\u0435\u043b\u0435\u0433\u043a\u043e \u0438 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u043e \u043d\u0435\u0434\u0430\u0432\u043d\u0435\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0441\u0447\u0438\u0442\u0430\u043b, \u0447\u0442\u043e \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u0434 \u043c\u043e\u0433\u0443\u0442 \u043f\u0438\u0441\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043b\u044e\u0434\u0438 \u0441\u043e \u0441\u0432\u0435\u0440\u0445\u0440\u0430\u0437\u0443\u043c\u043e\u043c \u0438 \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0431\u043e\u044f\u043b\u0441\u044f \u0434\u0430\u0436\u0435 \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c. \u042f \u0441\u0447\u0438\u0442\u0430\u044e, \u0447\u0442\u043e \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a \u044f \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u043e\u0447\u0435\u043d\u044c \u043c\u043d\u043e\u0433\u043e, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u044f \u0431\u0435\u0437\u0443\u043c\u043d\u044b\u0439 \u0440\u043e\u0441\u0442 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u043e\u0441\u0442\u0438 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f (\u0438 Javascript \u0432 \u0447\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u0438) \u0432 \u0448\u0438\u0440\u043e\u043a\u0438\u0445 \u043c\u0430\u0441\u0441\u0430\u0445 \u0432 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0435 \u0432\u0440\u0435\u043c\u044f. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0440\u0435\u0448\u0438\u043b \u043f\u0435\u0440\u0438\u043e\u0434\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u0430\u0442\u044c \u0437\u0434\u0435\u0441\u044c \u0441\u0432\u043e\u0438 \u0437\u0430\u043c\u0435\u0442\u043a\u0438 \u0438 \u043a\u0435\u0439\u0441\u044b, \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u044f \u0441\u0442\u0430\u043b\u043a\u0438\u0432\u0430\u043b\u0441\u044f \u0432 \u0440\u0430\u0431\u043e\u0442\u0435 \u0438 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u043b\u0438 \u0443 \u043c\u0435\u043d\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0435 \u0442\u0440\u0443\u0434\u043d\u043e\u0441\u0442\u0438, \u0447\u0442\u043e\u0431\u044b \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043e\u0431\u043b\u0435\u0433\u0447\u0438\u0442\u044c \u0436\u0438\u0437\u043d\u044c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c, \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u044e\u0449\u0438\u043c \u0441\u0445\u043e\u0436\u0438\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b.<\/p>\n<p>P.S. \u044f \u043d\u0435 \u043f\u0440\u0435\u0442\u0435\u043d\u0434\u0443\u044e \u043d\u0430 \u044d\u043a\u0441\u043f\u0435\u0440\u0442\u043d\u043e\u0441\u0442\u044c \u0437\u043d\u0430\u043d\u0438\u0439, \u043f\u043e\u044d\u0442\u043e\u043c\u0443, \u0441 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0439 \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e\u0441\u0442\u044c\u044e \u043c\u043e\u0433\u0443\u0442 \u043d\u0430\u0439\u0442\u0438\u0441\u044c \u043a\u0443\u0434\u0430 \u0431\u043e\u043b\u0435\u0435 \u043e\u043f\u0442\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f. \u041f\u043e\u043c\u043d\u0438\u0442\u0435: &#8216;\u042f \u0445\u0443\u0434\u043e\u0436\u043d\u0438\u043a &#8212; \u044f \u0442\u0430\u043a \u0432\u0438\u0436\u0443&#8217;.<\/p>\n<p>\u0410 \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u043b\u0430\u0432\u043d\u043e \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043a \u0442\u0435\u043c\u0435 \u0441\u0442\u0430\u0442\u044c\u0438. \u041d\u0438\u0436\u0435 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d \u0441\u043f\u0438\u0441\u043e\u043a \u0432\u043e\u043f\u0440\u043e\u0441\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u044f \u043f\u043e\u0441\u0442\u0430\u0440\u0430\u044e\u0441\u044c \u043e\u0441\u0432\u0435\u0442\u0438\u0442\u044c \u0432 \u0434\u0430\u043d\u043d\u043e\u0439 \u0437\u0430\u043c\u0435\u0442\u043a\u0435:<\/p>\n<ul>\n<li>\n<p>\u041a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u0441 \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0439 \u0448\u0430\u043f\u043a\u043e\u0439 \u0438 \u0441\u043a\u0440\u043e\u043b\u043b\u043e\u043c \u0432 body?<\/p>\n<\/li>\n<li>\n<p>\u041a\u0430\u043a \u0431\u044b\u0442\u044c, \u043a\u043e\u0433\u0434\u0430 c\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0441\u044a\u0435\u0437\u0436\u0430\u0435\u0442 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0448\u0430\u043f\u043a\u0438 \u043f\u0440\u0438 \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u0438 \u0441\u043a\u0440\u043e\u043b\u043b\u0430? \u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 css-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 scroll-width.<\/p>\n<\/li>\n<li>\n<p>\u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0438 \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0441\u043a\u0440\u043e\u043b\u043b\u0430: \u043f\u043b\u0430\u0432\u043d\u043e\u0441\u0442\u044c, scroll margin, \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0446\u0432\u0435\u0442\u0430 \u0438 \u0444\u043e\u0440\u043c\u044b.<\/p>\n<\/li>\n<\/ul>\n<h2>\u041a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u0441 \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0439 \u0448\u0430\u043f\u043a\u043e\u0439 \u0438 \u0441\u043a\u0440\u043e\u043b\u043b\u043e\u043c \u0432 body?<\/h2>\n<p>\u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0441\u0430\u043c\u0443\u044e \u043e\u0431\u044b\u043a\u043d\u043e\u0432\u0435\u043d\u043d\u0443\u044e \u0442\u0430\u0431\u043b\u0438\u0447\u043a\u0443 \u0438 \u0437\u0430\u043f\u043e\u043b\u043d\u0438\u043c \u0435\u0435 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u0438\u0437 faker \u0434\u043b\u044f \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e\u0441\u0442\u0438. \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a\u0443\u044e \u043a\u0430\u0440\u0442\u0438\u043d\u0443(\u0432\u0435\u0440\u0441\u0442\u043a\u0443 \u0434\u0435\u043b\u0430\u0435\u043c \u0441\u0430\u043c\u0443\u044e \u0431\u0430\u0437\u043e\u0432\u0443\u044e, \u043f\u0440\u043e\u0441\u0442\u043e \u0447\u0442\u043e\u0431\u044b \u0433\u043b\u0430\u0437 \u043d\u0435 \u0434\u0435\u0440\u0433\u0430\u043b\u0441\u044f \u043e\u0442 \u043e\u0434\u043d\u043e\u0433\u043e \u0435\u0435 \u0432\u0438\u0434\u0430):<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"\/img\/image-loader.svg\" height=\"878\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/090\/86a\/c82\/09086ac8298133369ad750887a9b40eb.png\" data-width=\"1400\"\/><figcaption><\/figcaption><\/figure>\n<details class=\"spoiler\">\n<summary>\u041a\u043e\u0434<\/summary>\n<div class=\"spoiler__content\">\n<pre><code>import React from 'react'; import { render } from 'react-dom'; import faker from 'faker'; import '.\/index.css';  \/\/ \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435 const users = Array(100).fill(null).map(() => ({   id: faker.random.uuid(),   first: faker.name.firstName(),   last: faker.name.lastName(),   email: faker.internet.email(), }));  const App = () => (         &lt;table >           &lt;thead>             &lt;tr>               &lt;th>First&lt;\/th>               &lt;th>Last&lt;\/th>               &lt;th>Email&lt;\/th>             &lt;\/tr>           &lt;\/thead>           &lt;tbody>             {users.map(x => (               &lt;tr key={x.id}>                 &lt;td>{x.first}&lt;\/td>                 &lt;td>{x.last}&lt;\/td>                 &lt;td>{x.email}&lt;\/td>               &lt;\/tr>             ))}           &lt;\/tbody>         &lt;\/table> );  render(&lt;App \/>, document.getElementById('root'));<\/code><\/pre>\n<pre><code>table {   width: 100%;   border-collapse: collapse;   border-spacing: 0; }  thead {   background-color: teal; }  td, th {   padding: 15px;   text-align: left; }  th {   color: white; }<\/code><\/pre>\n<\/div>\n<\/details>\n<p>\u041a\u0430\u043a \u043c\u044b \u0432\u0438\u0434\u0438\u043c, \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0441\u043d\u0430\u0440\u0443\u0436\u0438 \u0443 \u043d\u0430\u0441 \u043f\u043e\u044f\u0432\u0438\u043b\u0441\u044f \u0441\u043a\u0440\u043e\u043b\u043b, \u043d\u043e \u043d\u0430\u043c \u0442\u0430\u043a\u0430\u044f \u0431\u043e\u043b\u044c\u0448\u0430\u044f \u0442\u0430\u0431\u043b\u0438\u0446\u0430 \u043d\u0435 \u043d\u0443\u0436\u043d\u0430, \u043f\u043e \u0443\u0441\u043b\u043e\u0432\u0438\u044e \u043c\u044b \u0445\u043e\u0442\u0438\u043c, \u0447\u0442\u043e\u0431\u044b \u0441\u043a\u0440\u043e\u043b\u043b \u0443 \u043d\u0430\u0441 \u0431\u044b\u043b \u0442\u043e\u043b\u044c\u043a\u043e \u0443 \u0442\u0435\u043b\u0430 \u0442\u0430\u0431\u043b\u0438\u0446\u044b, \u0430 header \u043d\u0430\u0434 \u0432\u0441\u0435\u043c \u044d\u0442\u0438\u043c \u0434\u0435\u043b\u043e\u043c \u043d\u0430\u0432\u0438\u0441\u0430\u043b \u0441\u0432\u0435\u0440\u0445\u0443, \u043d\u0443 \u0438 \u0447\u0442\u043e\u0431\u044b \u0432 \u0432\u044b\u0441\u043e\u0442\u0443 \u043d\u0430\u0448\u0430 \u0442\u0430\u0431\u043b\u0438\u0447\u043a\u0430 \u0431\u044b\u043b\u0430 \u043d\u0435 \u0431\u043e\u043b\u044c\u0448\u0435 200 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439. \u0412 \u043e\u0431\u0449\u0435\u043c, \u0447\u0442\u043e-\u0442\u043e \u043d\u0430\u043f\u043e\u0434\u043e\u0431\u0438\u0435 \u0432\u043e\u0442 \u044d\u0442\u043e\u0433\u043e:<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"\/img\/image-loader.svg\" height=\"502\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/e58\/5d6\/39c\/e585d639c8ac8c48f56d0297876ac1c2.png\" data-width=\"1290\"\/><figcaption><\/figcaption><\/figure>\n<p>\u041d\u0443\u0436\u043d\u043e\u0433\u043e \u043d\u0430\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430 \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c\u0438 \u0441\u043f\u043e\u0441\u043e\u0431\u0430\u043c\u0438:<\/p>\n<ol>\n<li>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u043f\u043e \u0442\u0438\u043f\u0443 React-Table, React-Virtualized, \u043b\u0438\u0431\u043e \u043a\u0430\u043a\u0443\u044e-\u043d\u0438\u0431\u0443\u0434\u044c \u0435\u0449\u0435, \u0447\u0442\u043e\u0431\u044b \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0435 \u0437\u0430\u043c\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0442\u044c\u0441\u044f. \u041d\u0430\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e \u0440\u0435\u043a\u043e\u043c\u043c\u0435\u043d\u0434\u0443\u044e \u0445\u043e\u0442\u044f \u0431\u044b \u0441 \u043e\u0434\u043d\u043e\u0439 \u0438\u0437 \u043d\u0438\u0445 \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043e\u043d\u0438 \u043e\u0447\u0435\u043d\u044c \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u0431\u043b\u0435\u0433\u0447\u0430\u044e\u0442 \u0436\u0438\u0437\u043d\u044c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u043f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u0442\u0430\u0431\u043b\u0438\u0446\u0430\u043c\u0438.<\/p>\n<\/li>\n<li>\n<p>\u041d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u043e\u0434\u0448\u0430\u043c\u0430\u043d\u0438\u0442\u044c CSS, \u0447\u0435\u043c \u043c\u044b \u0441\u0435\u0439\u0447\u0430\u0441 \u0438 \u0437\u0430\u0439\u043c\u0435\u043c\u0441\u044f<\/p>\n<\/li>\n<\/ol>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/ef8\/0cc\/c69\/ef80ccc69ba2a7418630c0843195c645.jpg\" alt=\"\u042d\u0442\u043e \u043e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u043f\u0440\u0438\u0447\u0438\u043d\u0430, \u043f\u043e\u0447\u0435\u043c\u0443 \u044f \u0441\u043e\u0432\u0435\u0442\u0443\u044e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u043c\u0438\" title=\"\u042d\u0442\u043e \u043e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u043f\u0440\u0438\u0447\u0438\u043d\u0430, \u043f\u043e\u0447\u0435\u043c\u0443 \u044f \u0441\u043e\u0432\u0435\u0442\u0443\u044e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u043c\u0438\" width=\"600\" height=\"312\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/ef8\/0cc\/c69\/ef80ccc69ba2a7418630c0843195c645.jpg\" data-blurred=\"true\"\/><figcaption>\u042d\u0442\u043e \u043e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u043f\u0440\u0438\u0447\u0438\u043d\u0430, \u043f\u043e\u0447\u0435\u043c\u0443 \u044f \u0441\u043e\u0432\u0435\u0442\u0443\u044e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u043c\u0438<\/figcaption><\/figure>\n<p>\u041f\u0435\u0440\u0432\u043e\u0435,\u0447\u0442\u043e \u043c\u043d\u0435 \u043b\u0438\u0447\u043d\u043e \u043f\u0440\u0438\u0448\u043b\u043e \u043d\u0430 \u0443\u043c, \u043a\u043e\u0433\u0434\u0430 \u044f \u0432 \u043f\u0435\u0440\u0432\u044b\u0439 \u0440\u0430\u0437 \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0441\u044f \u0441 \u043f\u043e\u0434\u043e\u0431\u043d\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0435\u0439 &#8212; \u043d\u0443\u0436\u043d\u043e \u0432\u0441\u0435\u0433\u043e \u043b\u0438\u0448\u044c \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e display \u0443 \u0442\u0435\u0433\u043e\u0432 tbody \u0438 thead \u043d\u0430 &#8216;block&#8217; \u0438 \u043d\u0430\u043a\u0438\u043d\u0443\u0442\u044c \u043d\u0430 tbody \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0435 \u043f\u043e \u0432\u044b\u0441\u043e\u0442\u0435 (\u0437\u0434\u0435\u0441\u044c \u044f \u0441\u0447\u0438\u0442\u0430\u044e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u043c \u043f\u0440\u043e\u044f\u0441\u043d\u0438\u0442\u044c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043c\u043e\u043c\u0435\u043d\u0442, \u0432\u044b\u0437\u044b\u0432\u0430\u044e\u0449\u0438\u0439 \u0442\u0440\u0443\u0434\u043d\u043e\u0441\u0442\u0438 \u0443 \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0449\u0438\u0445: \u043c\u043d\u043e\u0433\u0438\u0435 \u043f\u044b\u0442\u0430\u044e\u0442\u0441\u044f \u043f\u0440\u043e\u0441\u0442\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u0432\u044b\u0441\u043e\u0442\u0443 \u0434\u043b\u044f body, \u0430 \u043f\u043e\u0442\u043e\u043c \u043d\u0435 \u043c\u043e\u0433\u0443\u0442 \u043f\u043e\u043d\u044f\u0442\u044c, \u043f\u043e\u0447\u0435\u043c\u0443 \u044d\u0442\u043e \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442. \u041d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0435 \u0437\u0430\u0431\u044b\u0442\u044c \u0435\u0449\u0435 \u043f\u0440\u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e overflow, \u0438 \u0432\u0441\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f).<\/p>\n<p>\u0417\u0430\u0447\u0435\u043c \u043d\u0430\u043c \u043c\u0435\u043d\u044f\u0442\u044c display?  \u0414\u0435\u043b\u043e \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e display \u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 thead \u0438 tbody \u0438\u043c\u0435\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 row-group(table-header-group \u0438 table-row-group \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e), \u0447\u0442\u043e \u0432 \u0441\u0432\u043e\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u043d\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0430\u043c \u0432\u0432\u043e\u0434\u0438\u0442\u044c \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0435 \u043f\u043e \u0432\u044b\u0441\u043e\u0442\u0435, \u0430 \u0437\u043d\u0430\u0447\u0438\u0442 \u0438 \u0441\u043a\u0440\u043e\u043b\u043b\u0430 \u0443 \u043d\u0438\u0445 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u043c\u0435\u043d\u044f\u0435\u043c \u0438\u0445 \u043d\u0430 \u043f\u043e\u043d\u044f\u0442\u043d\u044b\u0439 \u043d\u0430\u043c  display: &#8216;block&#8217;, \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043f\u0440\u043e\u0449\u0435 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c . <\/p>\n<details class=\"spoiler\">\n<summary>\u041d\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u043b\u043a\u0430 \u043f\u0440\u043e \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 height \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0430\u0445<\/summary>\n<div class=\"spoiler__content\">\n<p>\u041a\u043e\u0433\u0434\u0430 \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0435 \u0437\u0430\u0434\u0430\u043d\u00a0<strong>&lt;!DOCTYPE><\/strong>, \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u0438\u0433\u043d\u043e\u0440\u0438\u0440\u0443\u044e\u0442 \u0432\u044b\u0441\u043e\u0442\u0443 \u0442\u0430\u0431\u043b\u0438\u0446\u044b, \u0437\u0430\u0434\u0430\u043d\u043d\u0443\u044e \u0447\u0435\u0440\u0435\u0437 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u00a0height. \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0432\u044b\u0441\u043e\u0442\u0430 \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e \u0442\u0430\u0431\u043b\u0438\u0446\u044b.<\/p>\n<\/div>\n<\/details>\n<p>\u0417\u0434\u0435\u0441\u044c \u0435\u0441\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u044b\u0436\u043d\u044b\u0445 \u043c\u043e\u043c\u0435\u043d\u0442\u043e\u0432, \u043e \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043d\u0435 \u0441\u0442\u043e\u0438\u0442 \u0437\u0430\u0431\u044b\u0432\u0430\u0442\u044c:<\/p>\n<ol>\n<li>\n<p>\u041c\u0435\u043d\u044f\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e display \u043d\u0430 &#8216;block&#8217;, \u043c\u044b \u043a\u0430\u043a \u0431\u044b \u043b\u043e\u043c\u0430\u0435\u043c \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u043a\u0443, \u0438 \u043d\u0430\u0448 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0443\u0436\u0435 \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u0441\u0447\u0438\u0442\u0430\u0435\u0442 \u043d\u0430\u0448\u0443 \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u0442\u0430\u0431\u043b\u0438\u0446\u0435\u0439, \u0447\u0442\u043e \u0442\u0430\u043a\u0436\u0435 \u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u0432\u043b\u0438\u044f\u043d\u0438\u0435 \u043d\u0430 \u0441\u043a\u0440\u0438\u043d\u0440\u0438\u0434\u0435\u0440\u044b. <\/p>\n<\/li>\n<li>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u0448 \u0442\u0435\u0433 tr \u0443\u0436\u0435 \u043d\u0435 \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u0432\u0441\u0435 \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u0438 \u0442\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0432\u0441\u0435 \u044d\u0442\u043e \u0434\u0435\u043b\u043e \u0432\u044b\u0440\u043e\u0432\u043d\u044f\u0442\u044c.<\/p>\n<\/li>\n<\/ol>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"\/img\/image-loader.svg\" alt=\"\u0414\u043b\u044f \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e\u0441\u0442\u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043b border.\" title=\"\u0414\u043b\u044f \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e\u0441\u0442\u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043b border.\" height=\"512\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/658\/b13\/271\/658b132711505db7baac04d53ef34d32.png\" data-width=\"1400\"\/><figcaption>\u0414\u043b\u044f \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e\u0441\u0442\u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043b border.<\/figcaption><\/figure>\n<details class=\"spoiler\">\n<summary>\u041a\u043e\u0434<\/summary>\n<div class=\"spoiler__content\">\n<pre><code>import React from 'react'; import { render } from 'react-dom'; import faker from 'faker'; import '.\/index.css';  \/\/ \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435 const users = Array(100).fill(null).map(() => ({   id: faker.random.uuid(),   first: faker.name.firstName(),   last: faker.name.lastName(),   email: faker.internet.email(), }));  const App = () => (         &lt;table >           &lt;thead>             &lt;tr>               &lt;th>First&lt;\/th>               &lt;th>Last&lt;\/th>               &lt;th>Email&lt;\/th>             &lt;\/tr>           &lt;\/thead>           &lt;tbody>             {users.map(x => (               &lt;tr key={x.id}>                 &lt;td>{x.first}&lt;\/td>                 &lt;td>{x.last}&lt;\/td>                 &lt;td>{x.email}&lt;\/td>               &lt;\/tr>             ))}           &lt;\/tbody>         &lt;\/table> );  render(&lt;App \/>, document.getElementById('root')); <\/code><\/pre>\n<pre><code>table {   width: 100%;   border-collapse: collapse;   border-spacing: 0; }  thead {   display: block;   background-color: teal; }  tbody {   display: block;   overflow-y: auto;   overflow-x: hidden;   max-height: 200px;   min-height: 100px; }  tr {   border: 1px solid black; }  td, th {   text-align: left;   padding: 15px; }  th {   color: white; }<\/code><\/pre>\n<\/div>\n<\/details>\n<p>\u041a\u0430\u043a \u0431\u0443\u0434\u0435\u043c \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0442\u044c?<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/911\/b10\/9de\/911b109de1b8c490da78489308982ee6.jpg\" alt=\"\u041d\u0443, \u044f \u0434\u0443\u043c\u0430\u044e, \u0432\u044b \u043f\u043e\u043d\u044f\u043b\u0438\" title=\"\u041d\u0443, \u044f \u0434\u0443\u043c\u0430\u044e, \u0432\u044b \u043f\u043e\u043d\u044f\u043b\u0438\" width=\"600\" height=\"455\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/911\/b10\/9de\/911b109de1b8c490da78489308982ee6.jpg\" data-blurred=\"true\"\/><figcaption>\u041d\u0443, \u044f \u0434\u0443\u043c\u0430\u044e, \u0432\u044b \u043f\u043e\u043d\u044f\u043b\u0438<\/figcaption><\/figure>\n<p>\u0412 \u043e\u0431\u0449\u0435\u043c, \u0432 \u043b\u044e\u0431\u043e\u0439 \u043d\u0435\u043f\u043e\u043d\u044f\u0442\u043d\u043e\u0439 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 Flex \u0438\u043b\u0438 Grid \u0438 \u0431\u0443\u0434\u0435\u0442 \u0432\u0430\u043c \u0441\u0447\u0430\u0441\u0442\u044c\u0435. \u041d\u0438\u0436\u0435 \u043f\u0440\u0438\u0432\u0435\u0434\u0443 \u0434\u0432\u0430 \u0433\u043e\u0442\u043e\u0432\u044b\u0445 \u0431\u0430\u0437\u043e\u0432\u044b\u0445 \u043f\u0440\u0438\u043c\u0435\u0440\u0430, html \u0442\u0440\u043e\u0433\u0430\u0442\u044c \u043d\u0435 \u0431\u0443\u0434\u0443, \u043d\u043e \u044f \u0434\u0443\u043c\u0430\u044e, \u0447\u0442\u043e \u0438 \u0442\u0430\u043a \u043f\u043e\u043d\u044f\u0442\u043d\u043e, \u0447\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u0440\u0430\u0437\u0443 \u0432\u0435\u0440\u0441\u0442\u0430\u0442\u044c \u043d\u0430 div \u0438 \u043c\u0430\u0440\u043a\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0441\u043f\u0438\u0441\u043a\u0430\u0445 \u043f\u0440\u0438 \u0436\u0435\u043b\u0430\u043d\u0438\u0438. \u0414\u0430\u043b\u044c\u0448\u0435 \u0443\u0436\u0435 \u043f\u043e \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438 \u043c\u043e\u0436\u0435\u0442\u0435 \u0434\u043e\u0432\u0435\u0441\u0442\u0438 \u0434\u043e \u0443\u043c\u0430 \u0432\u0435\u0440\u0441\u0442\u043a\u0443, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440: \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0435 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u043f\u043e \u0448\u0438\u0440\u0438\u043d\u0435, \u043d\u0443\u0436\u043d\u044b\u0439 \u0432\u0430\u043c \u0444\u043e\u0440\u043c\u0430\u0442 \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0430 \u0441\u0442\u0440\u043e\u043a \u0438 \u0430\u0434\u0430\u043f\u0442\u0438\u0432, \u0435\u0441\u043b\u0438 \u043a\u043e\u043d\u0435\u0447\u043d\u043e \u043e\u043d \u043d\u0443\u0436\u0435\u043d, \u0442\u0430\u043a \u043a\u0430\u043a \u0432\u0441\u0435 \u0436\u0435 \u0432 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0435 \u0441\u0432\u043e\u0435\u043c \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0442\u0430\u0431\u043b\u0438\u0446 \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d \u0434\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u0430 \u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u044d\u043a\u0440\u0430\u043d\u0430\u0445. \u0412 \u043b\u044e\u0431\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u0430\u044f \u0432\u0435\u0440\u0441\u0442\u043a\u0430 \u043b\u0435\u0433\u043a\u043e \u0433\u0443\u0433\u043b\u0438\u0442\u0441\u044f.<\/p>\n<details class=\"spoiler\">\n<summary>\u0413\u043e\u0442\u043e\u0432\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0441 display: &#8216;Flex&#8217;<\/summary>\n<div class=\"spoiler__content\">\n<pre><code>import React from 'react'; import { render } from 'react-dom'; import faker from 'faker'; import '.\/index.css';  \/\/ \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435 const users = Array(100).fill(null).map(() => ({   id: faker.random.uuid(),   first: faker.name.firstName(),   last: faker.name.lastName(),   email: faker.internet.email(), }));  const App = () => (         &lt;table className='table'>           &lt;thead>             &lt;tr className='header'>               &lt;th className='firstColumn'>First&lt;\/th>               &lt;th className='secondColumn'>Last&lt;\/th>               &lt;th className='thirdColumn'>Email&lt;\/th>             &lt;\/tr>           &lt;\/thead>           &lt;tbody>             {users.map(x => (               &lt;tr className='body' key={x.id}>                 &lt;td className='firstColumn'>{x.first}&lt;\/td>                 &lt;td className='secondColumn'>{x.last}&lt;\/td>                 &lt;td className='thirdColumn'>{x.email}&lt;\/td>               &lt;\/tr>             ))}           &lt;\/tbody>         &lt;\/table> );  render(&lt;App \/>, document.getElementById('root')); <\/code><\/pre>\n<pre><code>table {   width: 100%;   border-collapse: collapse;   border-spacing: 0; }  thead {   background-color: teal;   color: white; }  thead, tbody, th, td {   display: block;   text-align: left; }  tbody {   overflow-y: auto;   overflow-x: hidden;   max-height: 200px;   min-height: 100px; }  tr {   display: flex; }  .firstColumn, .secondColumn {   flex: 1; }  .thirdColumn {   flex: 3; }  td, th {   padding: 15px;   overflow: hidden;   text-overflow: ellipsis;   white-space: nowrap; }<\/code><\/pre>\n<\/div>\n<\/details>\n<details class=\"spoiler\">\n<summary>\u0413\u043e\u0442\u043e\u0432\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0441 display &#8216;Grid&#8217;<\/summary>\n<div class=\"spoiler__content\">\n<pre><code>import React from 'react'; import { render } from 'react-dom'; import faker from 'faker'; import '.\/index.css';  \/\/ \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435 const users = Array(100).fill(null).map(() => ({   id: faker.random.uuid(),   first: faker.name.firstName(),   last: faker.name.lastName(),   email: faker.internet.email(), }));  const App = () => (         &lt;table className='table'>           &lt;thead>             &lt;tr className='header'>               &lt;th>First&lt;\/th>               &lt;th>Last&lt;\/th>               &lt;th>Email&lt;\/th>             &lt;\/tr>           &lt;\/thead>           &lt;tbody>             {users.map(x => (               &lt;tr className='body' key={x.id}>                 &lt;td>{x.first}&lt;\/td>                 &lt;td>{x.last}&lt;\/td>                 &lt;td>{x.email}&lt;\/td>               &lt;\/tr>             ))}           &lt;\/tbody>         &lt;\/table> );  render(&lt;App \/>, document.getElementById('root'));<\/code><\/pre>\n<pre><code>table {   width: 100%;   border-collapse: collapse;   border-spacing: 0; }  tr {   display: grid;   grid-template-columns: 1fr 1fr 2fr; }  thead {   background-color: teal;   color: white; }  thead, tbody, th, td {   display: block;   text-align: left; }  tbody {   overflow-y: auto;   overflow-x: hidden;   max-height: 200px;   min-height: 100px; }  td, th {   padding: 15px;   overflow: hidden;   text-overflow: ellipsis;   white-space: nowrap; } <\/code><\/pre>\n<\/div>\n<\/details>\n<p>\u0427\u0443\u0442\u044c \u043d\u0435 \u0437\u0430\u0431\u044b\u043b \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c \u043e\u0434\u043d\u0443 \u043e\u0447\u0435\u043d\u044c \u0432\u0430\u0436\u043d\u0443\u044e \u0432\u0435\u0449\u044c, \u0441 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u044f \u0432 \u0441\u0432\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0434\u043e\u043b\u0433\u043e \u043f\u044b\u0442\u0430\u043b\u0441\u044f \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f: <em>\u041d\u0410 \u041c\u0410\u041a\u0410\u0425 \u0415\u0421\u0422\u042c \u0424\u0423\u041d\u041a\u0426\u0418\u042f \u0410\u0412\u0422\u041e\u041c\u0410\u0422\u0418\u0427\u0415\u0421\u041a\u041e\u0413\u041e \u0421\u041a\u0420\u042b\u0422\u0418\u042f \u0421\u041a\u0420\u041e\u041b\u041b\u0411\u0410\u0420\u0410 \u0412 \u0411\u0420\u0410\u0423\u0417\u0415\u0420\u0410\u0425,  \u041a\u041e\u0422\u041e\u0420\u0410\u042f \u0412\u042b\u041a\u041b\u042e\u0427\u0410\u0415\u0422\u0421\u042f \u0412 \u041d\u0410\u0421\u0422\u0420\u041e\u0419\u041a\u0410\u0425.<\/em> \u0415\u0441\u043b\u0438 \u0432\u044b \u0432\u044b\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u0435 overflow: scroll, \u0438 \u0436\u0434\u0435\u0442\u0435, \u0447\u0442\u043e scroll \u0442\u0435\u043f\u0435\u0440\u044c \u0431\u0443\u0434\u0435\u0442 \u0432\u0438\u0434\u0435\u043d \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e, \u0442\u043e \u043d\u0430 \u043c\u0430\u043a\u0435 \u043e\u043d \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u043e\u043f\u0430\u0434\u0430\u0442\u044c \u0438 \u0431\u044b\u0442\u044c \u0432\u0438\u0434\u0438\u043c\u044b\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u043c\u043e\u043c\u0435\u043d\u0442 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438. \u041f\u043b\u044e\u0441 \u043d\u0430 \u043c\u0430\u043a\u0430\u0445 \u0441\u043a\u0440\u043e\u043b\u043b \u0443 \u043d\u0430\u0441 \u043a\u0430\u043a \u0431\u044b \u043f\u0430\u0440\u0438\u0442 \u0432 \u0432\u043e\u0437\u0434\u0443\u0445\u0435 \u043d\u0430\u0434 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u043e\u043c, \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e position: absolute \u0438 \u043d\u0435 \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u043c\u0435\u0441\u0442\u0430, \u0435\u0441\u043b\u0438 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0430\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u0430 (\u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043e\u043d\u0430 \u0432\u0441\u0435\u0433\u0434\u0430 \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u0430).<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"\/img\/image-loader.svg\" alt=\"\u0422\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043d\u0430 \u043c\u0430\u043a\u0431\u0443\u043a\u0435\" title=\"\u0422\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043d\u0430 \u043c\u0430\u043a\u0431\u0443\u043a\u0435\" height=\"512\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/fec\/3d6\/ff9\/fec3d6ff9b6c5686e116540528a16115.gif\" data-width=\"1400\"\/><figcaption>\u0422\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043d\u0430 \u043c\u0430\u043a\u0431\u0443\u043a\u0435<\/figcaption><\/figure>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/dcb\/ff4\/d8c\/dcbff4d8c49c3f52504a27b268f6db6a.jpg\" alt=\"\u0410 \u0432\u043e\u0442 \u0442\u0430\u043a \u0442\u043e\u0442 \u0436\u0435 \u043a\u043e\u0434 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043d\u0430 windows\" title=\"\u0410 \u0432\u043e\u0442 \u0442\u0430\u043a \u0442\u043e\u0442 \u0436\u0435 \u043a\u043e\u0434 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043d\u0430 windows\" width=\"1150\" height=\"257\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/dcb\/ff4\/d8c\/dcbff4d8c49c3f52504a27b268f6db6a.jpg\" data-blurred=\"true\"\/><figcaption>\u0410 \u0432\u043e\u0442 \u0442\u0430\u043a \u0442\u043e\u0442 \u0436\u0435 \u043a\u043e\u0434 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043d\u0430 windows<\/figcaption><\/figure>\n<p>\u0414\u0430-\u0434\u0430, \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u0447\u0442\u043e \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0432\u0438\u0434 \u0441\u043a\u0440\u043e\u043b\u043b\u0430 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u0442\u0430\u043a\u0436\u0435 \u043e\u0442 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u044b, \u0430 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0442 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430.<\/p>\n<p>\u0413\u043b\u044f\u0434\u044f \u043d\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0434\u043b\u044f windows, \u043c\u044b \u043f\u043b\u0430\u0432\u043d\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u043c \u043a \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0442\u0435\u043c\u0435.<\/p>\n<h2>\u041a\u0430\u043a \u0431\u044b\u0442\u044c, \u043a\u043e\u0433\u0434\u0430 c\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0441\u044a\u0435\u0437\u0436\u0430\u0435\u0442 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0448\u0430\u043f\u043a\u0438 \u043f\u0440\u0438 \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u0438 \u0441\u043a\u0440\u043e\u043b\u043b\u0430? \u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 css-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 scroll-width<\/h2>\n<p>\u041c\u044b \u043e\u0442\u0447\u0435\u0442\u043b\u0438\u0432\u043e \u0432\u0438\u0434\u0438\u043c, \u0447\u0442\u043e \u043d\u0430 windows  \u0441\u043a\u0440\u043e\u043b\u043b \u043f\u0440\u0438 \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u0438 \u0441\u044a\u0435\u0434\u0430\u0435\u0442 \u0447\u0430\u0441\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430, \u0447\u0442\u043e \u0432 \u0441\u0432\u043e\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u043d\u0430\u0448\u0435\u0439 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0441\u044a\u0435\u0437\u0436\u0430\u0435\u0442 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0448\u0430\u043f\u043a\u0438. \u042d\u0442\u043e \u043b\u0438\u0448\u044c \u043e\u0434\u0438\u043d \u0438\u0437 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432, \u043d\u043e \u0435\u0441\u0442\u044c \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u043a\u0435\u0439\u0441\u044b, \u043a\u043e\u0433\u0434\u0430 \u0441\u043a\u0440\u043e\u043b\u043b \u043d\u0435\u0433\u0430\u0442\u0438\u0432\u043d\u043e \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u043e \u0432\u0435\u0440\u0441\u0442\u043a\u0438. \u041a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u0431\u044b, \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u0430\u044f, \u0438 \u043d\u0430\u0432\u0435\u0440\u043d\u044f\u043a\u0430 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u0441\u043f\u043e\u0441\u043e\u0431 \u043a\u0430\u043a-\u0442\u043e \u0441 \u044d\u0442\u0438\u043c \u0431\u043e\u0440\u043e\u0442\u044c\u0441\u044f, \u043e\u0434\u043d\u0430\u043a\u043e, \u043a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u043d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0435\u0441\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u0441\u0442\u044b\u043b\u044c\u043d\u044b\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f (\u0432\u043e \u0432\u0441\u044f\u043a\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044f \u043d\u0435 \u043d\u0430\u0448\u0435\u043b \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0431\u044b \u043c\u0435\u043d\u044f \u0443\u0441\u0442\u0440\u043e\u0438\u043b\u043e). \u041d\u0438\u0436\u0435 \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u043e \u0441\u0430\u043c\u043e\u043c \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0435\u043d\u043d\u043e\u043c \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u043e\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b, \u043f\u043b\u044e\u0441 \u0437\u0430\u0442\u0440\u043e\u043d\u0443 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u043e\u0432\u043e\u0435 CSS \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u0438\u0437\u0431\u0430\u0432\u0438\u0442\u044c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u043e\u0442 \u044d\u0442\u043e\u0439 \u0433\u043e\u043b\u043e\u0432\u043d\u043e\u0439 \u0431\u043e\u043b\u0438.<\/p>\n<p>\u041d\u0443 \u0447\u0442\u043e \u0436, \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u043c!  \u0410\u043b\u0433\u043e\u0440\u0438\u0442\u043c \u043f\u0440\u043e\u0441\u0442 \u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0432\u0441\u0435\u0433\u043e \u043b\u0438\u0448\u044c 2 \u0448\u0430\u0433\u0430:<\/p>\n<ol>\n<li>\n<p>\u0417\u0430\u0434\u0430\u0435\u043c \u0434\u043b\u044f overflow-y \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 scroll, \u0447\u0442\u043e\u0431\u044b \u0432 \u043b\u044e\u0431\u043e\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438 \u0441\u043a\u0440\u043e\u043b\u043b \u0443 \u043d\u0430\u0441 \u043f\u0440\u0438\u0441\u0443\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u043b \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0435 (\u043e\u0442\u043c\u0435\u0447\u0443, \u0447\u0442\u043e \u0447\u0430\u0441\u0442\u043e \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u044b \u043d\u0435 \u0432 \u0432\u043e\u0441\u0442\u043e\u0440\u0433\u0435 \u043e\u0442 \u0442\u0430\u043a\u043e\u0433\u043e \u043f\u043e\u0432\u043e\u0440\u043e\u0442\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0439, \u043d\u0435 \u043f\u043e \u0444\u044d\u043d\u0448\u0443\u044e \u044d\u0442\u043e \u0432\u0441\u0451 \u0438 \u0432\u0441\u044e \u043a\u0440\u0430\u0441\u043e\u0442\u0443 \u043f\u043e\u0440\u0442\u0438\u0442).<\/p>\n<\/li>\n<li>\n<p>\u0412\u044b\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u043c \u0448\u0438\u0440\u0438\u043d\u0443 \u0441\u043a\u0440\u043e\u043b\u043b\u0430 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0438 \u0434\u0432\u0438\u0433\u0430\u0435\u043c \u0448\u0430\u043f\u043a\u0443 \u043d\u0430 \u043d\u0443\u0436\u043d\u043e\u0435 \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0435.<\/p>\n<\/li>\n<\/ol>\n<p>\u041a\u0430\u043a \u0432\u044b \u0443\u0436\u0435 \u0434\u043e\u0433\u0430\u0434\u0430\u043b\u0438\u0441\u044c \u0438\u0437 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430, \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0448\u0438\u0440\u0438\u043d\u044b \u0441\u043a\u0440\u043e\u043b\u043b\u0430 \u043e\u0447\u0435\u043d\u044c \u0443\u0434\u043e\u0431\u043d\u043e \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0432 css \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439, \u0447\u0442\u043e\u0431\u044b \u0438\u043c\u0435\u0442\u044c \u043a \u043d\u0435\u043c\u0443 \u0434\u043e\u0441\u0442\u0443\u043f \u0432 \u043b\u044e\u0431\u043e\u043c \u043c\u0435\u0441\u0442\u0435 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438. \u041d\u0438\u0436\u0435 \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443, \u043a\u0430\u043a \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c<\/p>\n<h2>\u041a\u0430\u043a \u043f\u043e\u0441\u0447\u0438\u0442\u0430\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440 \u0441\u043a\u0440\u043e\u043b\u043b\u0430 \u0438 \u043f\u043e\u043b\u043e\u0436\u0438\u0442\u044c \u0435\u0433\u043e \u0432 css-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e?<\/h2>\n<p>\u042f \u043f\u0440\u0438\u0432\u0435\u0434\u0443 \u043b\u0438\u0448\u044c \u043e\u0434\u0438\u043d \u0438\u0437 \u043c\u0435\u0442\u043e\u0434\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0441\u044c \u0441\u0430\u043c, \u043d\u043e \u0432\u044b \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u043b\u044f \u044d\u0442\u0438\u0445 \u0446\u0435\u043b\u0435\u0439 \u043b\u0438\u0431\u043e \u043e\u0434\u043d\u0438\u043c \u0438\u0437 \u0433\u043e\u0442\u043e\u0432\u044b\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u0439, \u043b\u0438\u0431\u043e \u0445\u043e\u0442\u044f \u0431\u044b \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c, \u043a\u0430\u043a \u0438\u043c\u0435\u043d\u043d\u043e \u043e\u043d\u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u044b \u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0430 \u0438\u0445 \u043e\u0441\u043d\u043e\u0432\u0435 \u0441\u0432\u043e\u0435. \u041f\u0440\u0438\u043d\u0446\u0438\u043f \u0432\u0435\u0437\u0434\u0435 \u043e\u0434\u0438\u043d \u0438 \u0442\u043e\u0442 \u0436\u0435.<\/p>\n<pre><code>const setScrollbarWidth = () => {   \/\/ \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440-\u0431\u043e\u043b\u0432\u0430\u043d\u043a\u0443   const outerContainer = document.createElement('div');      \/\/\u041d\u0430\u043a\u0438\u0434\u044b\u0432\u0430\u0435\u043c \u0441\u0442\u0438\u043b\u0438   outerContainer.style.visibility = 'hidden';    outerContainer.style.overflow = 'scroll';      \/\/\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0435\u0433\u043e \u043a body   document.body.appendChild(outerContainer);      \/\/ \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0435\u0449\u0435 \u043e\u0434\u0438\u043d \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0438 \u043f\u043e\u043c\u0435\u0449\u0430\u0435\u043c \u0435\u0433\u043e \u0432\u043d\u0443\u0442\u0440\u044c outerContainer   const innerContainer = document.createElement('div');    outerContainer.appendChild(innerContainer);        \/\/ \u0412\u044b\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u043c \u0448\u0438\u0440\u0438\u043d\u0443 \u043d\u0430\u0448\u0435\u0433\u043e \u0441\u043a\u0440\u043e\u043b\u043b\u0431\u0430\u0440\u0430   const scrollbarWidth =    (outerContainer.offsetWidth - innerContainer.offsetWidth);     \/\/ \u0421\u043e\u0437\u0434\u0430\u0435\u043c css-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e    document.documentElement.style.setProperty('--scroll-width',    `${scrollbarWidth}px`);       \/\/ \u0423\u0434\u0430\u043b\u044f\u0435\u043c \u043d\u0430\u0448 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440-\u0431\u043e\u043b\u0432\u0430\u043d\u043a\u0443   outerContainer.parentNode.removeChild(outerContainer);  }<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u043c \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0448\u0438\u0440\u0438\u043d\u044b \u0441\u043a\u0440\u043e\u043b\u043b\u0430 \u0432 \u043d\u0443\u0436\u043d\u043e\u043c \u043d\u0430\u043c \u043c\u0435\u0441\u0442\u0435. \u0415\u0441\u043b\u0438 \u043a\u0442\u043e-\u0442\u043e \u0440\u0430\u043d\u0435\u0435 \u043d\u0435 \u0441\u0442\u0430\u043b\u043a\u0438\u0432\u0430\u043b\u0441\u044f \u0441 \u00a0css-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c\u0438, \u0442\u043e \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u0438\u0441\u043a\u0430\u0442\u044c \u043d\u0430 \u0445\u0430\u0431\u0440\u0435, \u0442\u0443\u0442 \u0435\u0441\u0442\u044c \u043d\u0435\u043f\u043b\u043e\u0445\u0438\u0435 \u0441\u0442\u0430\u0442\u044c\u0438 \u043d\u0430 \u044d\u0442\u0443 \u0442\u0435\u043c\u0443 \u0441 \u0431\u043e\u043b\u044c\u0448\u0438\u043c \u043a\u043e\u043b-\u0432\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c css-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u043e:<\/p>\n<pre><code>padding-right: var(--scroll-width)<\/code><\/pre>\n<p> \u041f\u0440\u0438\u043c\u0435\u043d\u044f\u044f \u0432\u0441\u0435 \u0432\u044b\u0448\u0435\u043e\u043f\u0438\u0441\u0430\u043d\u043d\u043e\u0435 \u043a \u043c\u043e\u0435\u043c\u0443 \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u043c\u0443 \u043a\u043e\u0434\u0443 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c:<\/p>\n<details class=\"spoiler\">\n<summary>\u041a\u043e\u0434<\/summary>\n<div class=\"spoiler__content\">\n<pre><code>import React, { useEffect } from \"react\"; import { render } from \"react-dom\"; import faker from \"faker\"; import \".\/index.css\";  const setScrollbarWidth = () => {   const outerContainer = document.createElement(\"div\");    outerContainer.style.visibility = \"hidden\";   outerContainer.style.overflow = \"scroll\";    document.body.appendChild(outerContainer);    const innerContainer = document.createElement(\"div\");   outerContainer.appendChild(innerContainer);    const scrollbarWidth =     outerContainer.offsetWidth - innerContainer.offsetWidth;    document.documentElement.style.setProperty(     \"--scroll-width\",     `${scrollbarWidth}px`   );    outerContainer.parentNode.removeChild(outerContainer); };  \/\/ \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435 const users = Array(100)   .fill(null)   .map(() => ({     id: faker.random.uuid(),     first: faker.name.firstName(),     last: faker.name.lastName(),     email: faker.internet.email()   }));  const App = () => {   useEffect(() => setScrollbarWidth(), []);    return (     &lt;table className=\"table\">       &lt;thead>         &lt;tr className=\"header\">           &lt;th>First&lt;\/th>           &lt;th>Last&lt;\/th>           &lt;th>Email&lt;\/th>         &lt;\/tr>       &lt;\/thead>       &lt;tbody>         {users.map((x) => (           &lt;tr className=\"body\" key={x.id}>             &lt;td>{x.first}&lt;\/td>             &lt;td>{x.last}&lt;\/td>             &lt;td>{x.email}&lt;\/td>           &lt;\/tr>         ))}       &lt;\/tbody>     &lt;\/table>   ); };  render(&lt;App \/>, document.getElementById(\"root\")); <\/code><\/pre>\n<pre><code>table {   width: 100%;   border-collapse: collapse;   border-spacing: 0; }  tr {   display: grid;   grid-template-columns: 1fr 1fr 2fr; }  thead {   padding-right: var(--scroll-width);   background-color: teal;   color: white; }  thead, tbody, th, td {   display: block;   text-align: left; }  tbody {   overflow-y: scroll;   overflow-x: hidden;   max-height: 200px;   min-height: 100px; }  td, th {   padding: 15px;   overflow: hidden;   text-overflow: ellipsis;   white-space: nowrap; } <\/code><\/pre>\n<\/div>\n<\/details>\n<p>\u0412 \u043e\u0447\u0435\u0440\u0435\u0434\u043d\u043e\u0439 \u0440\u0430\u0437 \u0445\u043e\u0447\u0443 \u043d\u0430\u043f\u043e\u043c\u043d\u0438\u0442\u044c, \u0447\u0442\u043e \u043d\u0430 \u043c\u0430\u043a\u0435 \u043d\u0438\u0447\u0435\u0433\u043e \u0441\u044a\u0435\u0437\u0436\u0430\u0442\u044c \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u043d\u043e \u0435\u0441\u043b\u0438 \u0443\u0436 \u0432\u044b \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u0435 \u0441\u043a\u0440\u043e\u043b\u043b \u0432 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u0445, \u0442\u043e \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0435 \u043c\u043d\u043e\u0439 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0442\u0430\u043a\u0436\u0435 \u043e\u0442\u043b\u0438\u0447\u043d\u043e \u043e\u0442\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0438 \u0432\u0441\u0451 \u0431\u0443\u0434\u0435\u0442 \u0440\u043e\u0432\u043d\u0435\u043d\u044c\u043a\u043e.<\/p>\n<p>\u0420\u0430\u043d\u044c\u0448\u0435 \u0431\u044b\u043b\u043e \u0435\u0449\u0435 \u043e\u0434\u043d\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u043e\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b &#8212; \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 overflow \u0432 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0438 overlay, \u0447\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u043b\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441\u043a\u0440\u043e\u043b\u043b\u0431\u0430\u0440 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a\u0438\u043c \u0436\u0435, \u043a\u0430\u043a \u0441\u0435\u0439\u0447\u0430\u0441 \u043d\u0430 \u043c\u0430\u043a\u0430\u0445, \u0442.\u0435. \u043d\u0435 \u0437\u0430\u043d\u0438\u043c\u0430\u044e\u0449\u0438\u043c \u043c\u0435\u0441\u0442\u0430 (\u043f\u043e\u0432\u0435\u0440\u0445 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430), \u043e\u0434\u043d\u0430\u043a\u043e \u044d\u0442\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0435\u0435 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e &#8212; \u044d\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u043f\u043b\u043e\u0445\u0430\u044f \u0438\u0434\u0435\u044f.<\/p>\n<h2>\u041c\u043e\u0436\u043d\u043e \u043b\u0438 \u043a\u0430\u043a\u0438\u043c-\u0442\u043e \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0432\u0441\u0435-\u0442\u0430\u043a\u0438 \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f overflow: scroll?<\/h2>\n<p>\u041e\u0442\u0432\u0435\u0442: \u0432 \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438 \u043c\u043e\u0436\u043d\u043e, \u043d\u0443\u0436\u043d\u043e \u0432\u0441\u0435\u0433\u043e \u043b\u0438\u0448\u044c \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0443\u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u0448 \u043a\u043e\u0441\u0442\u044b\u043b\u044c.<\/p>\n<p>\u0410\u043b\u0433\u043e\u0440\u0438\u0442\u043c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439:<\/p>\n<ol>\n<li>\n<p>\u041e\u0431\u044a\u044f\u0432\u043b\u044f\u0435\u043c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u043a\u043b\u0430\u0441\u0441 \u0441 \u043d\u0430\u0448\u0438\u043c padding<\/p>\n<\/li>\n<li>\n<p>\u041c\u0435\u043d\u044f\u0435\u043c overflow \u043d\u0430 auto (\u0447\u0442\u043e\u0431\u044b \u0441\u043a\u0440\u043e\u043b\u043b \u043f\u043e\u044f\u0432\u043b\u044f\u043b\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438)<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0448\u0438\u0440\u0438\u043d\u0443 \u0448\u0430\u043f\u043a\u0438 \u0438 body <\/p>\n<\/li>\n<li>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c classnames, \u0447\u0442\u043e\u0431\u044b \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0443\u0441\u043b\u043e\u0432\u0438\u0435 \u043d\u0430 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043d\u0430\u0448\u0435\u0433\u043e \u043d\u043e\u0432\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430 \u043a \u0448\u0430\u043f\u043a\u0435: \u0448\u0438\u0440\u0438\u043d\u0430 body \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u0440\u0430\u0432\u043d\u0430 \u0448\u0438\u0440\u0438\u043d\u0435 \u0448\u0430\u043f\u043a\u0438 (\u0442\u043e \u0435\u0441\u0442\u044c \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0441\u0434\u0432\u0438\u0433, \u0442\u043e\u043b\u044c\u043a\u043e \u0435\u0441\u043b\u0438 \u0432 body \u0435\u0441\u0442\u044c scroll). \u0414\u043b\u044f \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430 \u0445\u0440\u0430\u043d\u0438\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0432 \u0441\u0442\u044d\u0439\u0442\u0435.<\/p>\n<\/li>\n<\/ol>\n<details class=\"spoiler\">\n<summary>\u0424\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u0434<\/summary>\n<div class=\"spoiler__content\">\n<pre><code>import React, { useEffect, useState } from \"react\"; import { render } from \"react-dom\"; import faker from \"faker\"; import cx from \"classnames\"; import \".\/index.css\";  const setScrollbarWidth = () => {   const outerContainer = document.createElement(\"div\");    outerContainer.style.visibility = \"hidden\";   outerContainer.style.overflow = \"scroll\";    document.body.appendChild(outerContainer);    const innerContainer = document.createElement(\"div\");   outerContainer.appendChild(innerContainer);    const scrollbarWidth =     outerContainer.offsetWidth - innerContainer.offsetWidth;    document.documentElement.style.setProperty(     \"--scroll-width\",     `${scrollbarWidth}px`   );   outerContainer.parentNode.removeChild(outerContainer); };  \/\/ \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435 const users = Array(30)   .fill(null)   .map(() => ({     id: faker.random.uuid(),     first: faker.name.firstName(),     last: faker.name.lastName(),     email: faker.internet.email()   }));  const App = () => {   const [isShiftAllowed, setIsShiftAllowed] = useState(false);    useEffect(() => {     setScrollbarWidth();     const headerWidth = document.querySelector(\".header\").clientWidth;     const bodyWidth = document.querySelector(\".body\").clientWidth;     headerWidth - bodyWidth !== 0       ? setIsShiftAllowed(true)       : setIsShiftAllowed(false);   }, []);    return (     &lt;table className=\"table\">       &lt;thead className={cx({ shift: isShiftAllowed })}>         &lt;tr className=\"header\">           &lt;th>First&lt;\/th>           &lt;th>Last&lt;\/th>           &lt;th>Email&lt;\/th>         &lt;\/tr>       &lt;\/thead>       &lt;tbody>         {users.map((x) => (           &lt;tr className=\"body\" key={x.id}>             &lt;td>{x.first}&lt;\/td>             &lt;td>{x.last}&lt;\/td>             &lt;td>{x.email}&lt;\/td>           &lt;\/tr>         ))}       &lt;\/tbody>     &lt;\/table>   ); };  render(&lt;App \/>, document.getElementById(\"root\")); <\/code><\/pre>\n<pre><code> table {   width: 100%;   border-collapse: collapse;   border-spacing: 0; }  .shift {   padding-right: var(--scroll-width); }  tr {   display: grid;   grid-template-columns: 1fr 1fr 2fr; }  thead {   background-color: teal;   color: white; }  thead, tbody, th, td {   display: block;   text-align: left; }  tbody {   overflow-y: auto;   overflow-x: hidden;   max-height: 200px;   min-height: 100px; }  td, th {   padding: 15px;   overflow: hidden;   text-overflow: ellipsis;   white-space: nowrap; } <\/code><\/pre>\n<\/div>\n<\/details>\n<p>\u0415\u0441\u043b\u0438 \u043a\u0442\u043e-\u043d\u0438\u0431\u0443\u0434\u044c \u0437\u043d\u0430\u0435\u0442, \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0432\u0441\u0451 \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u043e\u043f\u0442\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c, \u0442\u043e \u043f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430 \u0434\u0430\u0439\u0442\u0435 \u043c\u043d\u0435 \u043e\u0431 \u044d\u0442\u043e\u043c \u0437\u043d\u0430\u0442\u044c \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445.<\/p>\n<p>\u042f \u0443\u043f\u043e\u043c\u0438\u043d\u0430\u043b \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u0435\u0441\u0442\u044c \u043d\u043e\u0432\u043e\u0435 css \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043c\u043e\u0436\u0435\u0442 \u0441\u0442\u0430\u0442\u044c \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0438\u043c \u0441\u043f\u0430\u0441\u0435\u043d\u0438\u0435\u043c \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0432\u043e\u043f\u0440\u043e\u0441\u0435, \u0438\u043c\u044f \u0435\u043c\u0443 scrollbar-gutter. \u0415\u0449\u0435 \u0440\u0430\u0437 \u043f\u043e\u0432\u0442\u043e\u0440\u044e\u0441\u044c, <strong>\u044d\u0442\u043e \u043d\u043e\u0432\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e<\/strong>, \u0438 \u043d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u043e\u043d\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043c\u0438 Opera, Chrome \u0438 Edge, \u0442\u0430\u043a \u0441\u043a\u0430\u0437\u0430\u0442\u044c still work in progress. \u041a\u0430\u043a \u043e\u0431\u044a\u044f\u0441\u043d\u044f\u0435\u0442\u0441\u044f \u0432 MDN, <em>scrollbar gutter &#8212;<\/em> \u044d\u0442\u043e \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0438 \u0435\u0441\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043b\u0435\u0436\u0438\u0442 \u043d\u0430\u0448 \u0431\u0435\u0433\u0443\u043d\u043e\u043a \u0441\u043a\u0440\u043e\u043b\u043b\u0431\u0430\u0440\u0430 (\u0435\u0441\u043b\u0438 \u043a\u043e\u043d\u0435\u0447\u043d\u043e overflow \u043d\u0435 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0438 overlay). \u0421\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u043a\u043e\u043c\u0431\u0438\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0441\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 overflow \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0433\u0438\u0431\u043a\u043e \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435\u043c \u044d\u0442\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430, \u0440\u0435\u0437\u0435\u0440\u0432\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043c\u0435\u0441\u0442\u043e \u0438 \u0442.\u0434. \u041e\u0447\u0435\u043d\u044c \u043d\u0430\u0434\u0435\u044e\u0441\u044c, \u0447\u0442\u043e \u0432 \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0435\u043c \u0431\u0443\u0434\u0443\u0449\u0435\u043c \u0435\u0433\u043e \u043d\u0430\u043a\u043e\u043d\u0435\u0446 \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u043e \u0434\u043e\u043f\u0438\u043b\u044f\u0442.<\/p>\n<p>\u0417\u0430\u043c\u0435\u0442\u043a\u0430 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0430\u0441\u044c \u0443\u0436\u0435 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0431\u043e\u043b\u044c\u0448\u043e\u0439, \u043d\u043e \u0443 \u043d\u0430\u0441 \u043e\u0441\u0442\u0430\u043b\u0430\u0441\u044c \u0435\u0449\u0435 \u043e\u0434\u043d\u0430 \u0442\u0435\u043c\u0430, \u043f\u043e\u0442\u0435\u0440\u043f\u0438\u0442\u0435 \u0435\u0449\u0435 \u043d\u0435\u043c\u043d\u043e\u0433\u043e, \u043f\u043e\u0441\u0442\u0430\u0440\u0430\u044e\u0441\u044c \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0447\u0435\u0433\u043e-\u043d\u0438\u0431\u0443\u0434\u044c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0435\u043d\u044c\u043a\u043e\u0433\u043e.<\/p>\n<h2>\u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0438 \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0441\u043a\u0440\u043e\u043b\u043b\u0430.<\/h2>\n<p>\u0411\u043e\u043b\u044c\u0448\u0443\u044e \u0447\u0430\u0441\u0442\u044c \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u0434\u043b\u044f \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u0430 \u044f \u043f\u043e\u0434\u0447\u0435\u0440\u043a\u043d\u0443\u043b \u0438\u0437 \u0441\u0442\u0430\u0442\u0435\u0439, \u0430\u0432\u0442\u043e\u0440\u043e\u043c \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f Josh W Comeau, \u0432\u0441\u0435\u043c \u0440\u0435\u043a\u043e\u043c\u043c\u0435\u043d\u0434\u0443\u044e \u043f\u043e\u0441\u0435\u0442\u0438\u0442\u044c \u0435\u0433\u043e \u0432\u0435\u0431\u0441\u0430\u0439\u0442 <a href=\"https:\/\/www.joshwcomeau.com\/\" rel=\"noopener noreferrer nofollow\">https:\/\/www.joshwcomeau.com\/<\/a>, \u0442\u0430\u043c \u0432\u044b \u043d\u0430\u0439\u0434\u0435\u0442\u0435 \u043e\u0447\u0435\u043d\u044c \u043c\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u043e\u0441\u0442\u0435\u0439.<\/p>\n<h3>\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043f\u043b\u0430\u0432\u043d\u043e\u0441\u0442\u044c<\/h3>\n<p>\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0433\u043b\u044f\u0434\u044f \u043d\u0430 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a, \u043a\u0442\u043e-\u0442\u043e \u0438\u0437 \u0432\u0430\u0441 \u0441\u0435\u0439\u0447\u0430\u0441 \u0441\u0438\u0434\u0438\u0442 \u0432 \u043d\u0435\u0434\u043e\u0443\u043c\u0435\u043d\u0438\u0438: &#8216;\u041f\u043b\u0430\u0432\u043d\u043e\u0441\u0442\u044c? \u0421\u043a\u0440\u043e\u043b\u043b \u0432\u0435\u0434\u044c \u0438 \u0442\u0430\u043a \u043f\u043b\u0430\u0432\u043d\u044b\u0439,  \u043e \u0447\u0435\u043c \u0442\u044b?&#8217;. \u0422\u0430\u043a-\u0442\u043e \u043e\u043d\u043e \u0442\u0430\u043a, \u043d\u043e \u044f \u0432\u043e\u0442 \u043e \u0447\u0442\u043e \u0438\u043c\u0435\u044e \u0432\u0432\u0438\u0434\u0443: \u0432\u0441\u0435 \u043c\u044b \u043f\u0440\u0435\u043a\u0440\u0430\u0441\u043d\u043e \u0437\u043d\u0430\u0435\u043c \u043e \u0442\u043e\u043c,  \u0447\u0442\u043e \u0432 html \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441\u0441\u044b\u043b\u043a\u0443-\u044f\u043a\u043e\u0440\u044c, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043d\u0430 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u0442\u044c\u0441\u044f \u043a \u043d\u0443\u0436\u043d\u043e\u043c\u0443 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u0443 \u0442\u0435\u043a\u0441\u0442\u0430, \u0441\u0430\u043c\u044b\u0439 \u0431\u0430\u0437\u043e\u0432\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u043d\u0430 \u0432\u0441\u0435\u043c\u0438 \u043b\u044e\u0431\u0438\u043c\u043e\u0439 \u0432\u0438\u043a\u0438\u043f\u0435\u0434\u0438\u0438:<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"\/img\/image-loader.svg\" height=\"672\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/974\/ef2\/fe1\/974ef2fe12a83fba8fa5db09e1ed60dd.gif\" data-width=\"1368\"\/><figcaption><\/figcaption><\/figure>\n<p>\u041a\u0430\u043a \u043c\u044b \u0432\u0438\u0434\u0438\u043c, \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u043e, \u043e\u0434\u043d\u0430\u043a\u043e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e\u0442 \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u043f\u043b\u0430\u0432\u043d\u044b\u043c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e CSS (\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u044d\u0442\u043e \u0434\u043b\u044f \u0432\u0430\u0441 \u043a\u043e\u043d\u0435\u0447\u043d\u043e \u043d\u0435 \u043d\u043e\u0432\u043e\u0441\u0442\u044c, \u043d\u043e \u043a\u043e\u043c\u0443-\u0442\u043e \u0442\u043e\u0447\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043b\u0435\u0437\u043d\u043e). \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u043e\u0442 \u044d\u0442\u043e\u0442 \u043a\u0443\u0441\u043e\u0447\u0435\u043a \u043a\u043e\u0434\u0430:<\/p>\n<pre><code>@media (prefers-reduced-motion: no-preference) {   html {     scroll-behavior: smooth;   } }<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0442\u043e \u0436\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043a\u0435 \u0432\u0438\u043a\u0438\u043f\u0435\u0434\u0438\u0438 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"\/img\/image-loader.svg\" height=\"672\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/a32\/af5\/3c0\/a32af53c0b6c6627baa3627729b75117.gif\" data-width=\"1368\"\/><figcaption><\/figcaption><\/figure>\n<p>\u041a\u0441\u0442\u0430\u0442\u0438 \u0433\u043e\u0432\u043e\u0440\u044f,  \u0435\u0441\u043b\u0438 \u0432\u0434\u0440\u0443\u0433 \u043a\u0442\u043e-\u0442\u043e \u043d\u0435 \u0437\u043d\u0430\u043b, \u0432 Chrome devtools \u043c\u043e\u0436\u043d\u043e \u0442\u0430\u043a\u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c media queries. \u0412\u043e\u0442 \u0437\u0434\u0435\u0441\u044c \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0443\u044e \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044e \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c: <a href=\"https:\/\/daveceddia.com\/inspector-stylesheet-chrome\/\" rel=\"noopener noreferrer nofollow\">https:\/\/daveceddia.com\/inspector-stylesheet-chrome\/<\/a>. \u041a\u0435\u0439\u0441 \u0441\u0443\u043f\u0435\u0440 \u0440\u0435\u0434\u043a\u0438\u0439, \u043d\u043e \u043c\u0430\u043b\u043e \u043b\u0438, \u0432\u0434\u0440\u0443\u0433 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f.<\/p>\n<p>\u041d\u0430 \u043c\u043e\u0439 \u0432\u0437\u0433\u043b\u044f\u0434 \u0431\u043e\u043b\u0435\u0435 \u043f\u043b\u0430\u0432\u043d\u043e\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043d\u0430 \u0441\u0441\u044b\u043b\u043a\u0443-\u044f\u043a\u043e\u0440\u044c \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043a\u0443\u0434\u0430 \u043f\u0440\u0438\u044f\u0442\u043d\u0435\u0435 \u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043b\u0443\u0447\u0448\u0435 \u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435, \u0434\u0430 \u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0445\u043e\u0440\u043e\u0448\u043e, \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043b\u0438\u0448\u044c \u0432 Internet Explorer \u0438 SAFARI.  <\/p>\n<p>\u041e\u0442\u043c\u0435\u0447\u0443 \u0442\u0430\u043a\u0436\u0435 \u0432\u0430\u0436\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442: \u0435\u0441\u043b\u0438 \u0432\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0435 scroll-behavior: smooth \u0432 html, \u0442\u043e \u0438\u043c\u0435\u0439\u0442\u0435 \u0432\u0432\u0438\u0434\u0443, \u0447\u0442\u043e \u044d\u0442\u043e \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0442\u0430\u043a\u0436\u0435 \u0430\u0444\u0444\u0435\u043a\u0442\u0438\u0442 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u043c\u0435\u0442\u043e\u0434\u0430 <strong>window.scrollTo (\u0442\u043e\u0436\u0435 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043f\u043b\u0430\u0432\u043d\u044b\u043c), <\/strong>\u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u043f\u0435\u0440\u0435\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043d\u0430\u0432\u0435\u0440\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0432 \u043e\u0442\u0432\u0435\u0442 \u043d\u0430 submit. \u0415\u0441\u043b\u0438 \u0432\u0434\u0440\u0443\u0433 \u0432\u044b \u0440\u0430\u043d\u044c\u0448\u0435 \u043d\u0435 \u0441\u0442\u0430\u043b\u043a\u0438\u0432\u0430\u043b\u0438\u0441\u044c \u0441 \u044d\u0442\u0438\u043c \u043c\u0435\u0442\u043e\u0434\u043e\u043c,  \u0442\u043e \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u044c\u0442\u0435\u0441\u044c \u0438 \u0442\u0430\u043a\u0436\u0435 \u043d\u0435 \u0437\u0430\u0431\u0443\u0434\u044c\u0442\u0435 \u043f\u0440\u043e \u043c\u0435\u0442\u043e\u0434<strong> scrollIntoView <\/strong>(\u0440\u0430\u0437\u043d\u0438\u0446\u0430 \u043c\u0435\u0436\u0434\u0443 \u043d\u0438\u043c\u0438 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043f\u0435\u0440\u0432\u044b\u0439 \u043e\u043f\u0435\u0440\u0438\u0440\u0443\u0435\u0442 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u043c\u0438, \u0430 \u0432\u0442\u043e\u0440\u043e\u0439 \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u0435\u0442 \u043a \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443).<\/p>\n<h2>Scroll margin<\/h2>\n<p>\u041a\u0430\u043a \u043c\u044b \u0432\u0438\u0434\u0435\u043b\u0438 \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0432\u044b\u0448\u0435, \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043d\u0430 \u0441\u0441\u044b\u043b\u043a\u0443-\u044f\u043a\u043e\u0440\u044c \u043d\u0430\u0448\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043a\u0430 \u043f\u0440\u043e\u043a\u0440\u0443\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c,  \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u044b\u0439 \u043d\u0430\u043c \u0442\u0435\u043a\u0441\u0442 \u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u0441\u0430\u043c\u043e\u043c \u0432\u0435\u0440\u0445\u0443 \u044d\u043a\u0440\u0430\u043d\u0430. \u041e\u0434\u043d\u0430\u043a\u043e, \u0435\u0441\u043b\u0438 \u0443 \u043d\u0430\u0441 \u0438\u043c\u0435\u0435\u0442\u0441\u044f header \u0441\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u043c position \u0432 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0438 sticky \u0438\u043b\u0438 fixed, \u0442\u043e \u0447\u0430\u0441\u0442\u044c \u043d\u0443\u0436\u043d\u043e\u0433\u043e \u043d\u0430\u043c \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0437\u0430\u043f\u043e\u043b\u0437\u0435\u0442 \u043f\u043e\u0434 \u043d\u0435\u0433\u043e \u0438 \u043d\u0430\u043c \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u0441\u043a\u0440\u043e\u043b\u043b\u0438\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043a\u0443 \u0432\u0432\u0435\u0440\u0445, \u0447\u0442\u043e\u0431\u044b \u044d\u0442\u043e\u0442 \u0441\u0430\u043c\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0441\u0442\u0430\u043b\u043e \u0432\u0438\u0434\u043d\u043e. <\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"\/img\/image-loader.svg\" alt=\"\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438\" title=\"\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438\" height=\"708\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/4f1\/42f\/0af\/4f142f0af18767c0dc8e65538d18ca72.gif\" data-width=\"1300\"\/><figcaption>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438<\/figcaption><\/figure>\n<p>\u0417\u0434\u0435\u0441\u044c \u043d\u0430\u043c \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 scroll-margin-top, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442, \u0433\u0434\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0434\u043e\u043b\u0436\u0435\u043d \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0432\u0435\u0440\u0445\u043d\u0435\u0439 \u0447\u0430\u0441\u0442\u0438 \u043e\u043a\u043d\u0430 \u043f\u0440\u0438 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0435. \u0421\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u043f\u043e\u0434\u043e\u0431\u0440\u0430\u0442\u044c \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0435\u0435 \u043f\u043e\u0434 \u0432\u0430\u0448\u0443 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u0443\u044e \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044e.<\/p>\n<h2>\u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0446\u0432\u0435\u0442\u0430. <\/h2>\n<p>\u0418\u043d\u043e\u0433\u0434\u0430 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 \u0441\u043a\u0440\u043e\u043b\u043b \u043e\u0447\u0435\u043d\u044c \u0441\u0438\u043b\u044c\u043d\u043e \u0432\u044b\u0431\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0438\u0437 \u043e\u0431\u0449\u0435\u0439 \u043a\u0430\u0440\u0442\u0438\u043d\u044b \u0441\u0430\u0439\u0442\u0430 \u0438 \u043f\u043e\u0440\u0442\u0438\u0442 \u0432\u0441\u0435 \u0432\u043f\u0435\u0447\u0430\u0442\u043b\u0435\u043d\u0438\u0435,  \u043f\u043e\u044d\u0442\u043e\u043c\u0443, \u0437\u0430\u0447\u0430\u0441\u0442\u0443\u044e, \u0432\u0441\u0442\u0430\u0435\u0442 \u0432\u043e\u043f\u0440\u043e\u0441 \u043e \u0442\u043e\u043c, \u043a\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043c\u043e\u0436\u043d\u043e \u0435\u0433\u043e \u0445\u043e\u0442\u044f \u0431\u044b \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c.<\/p>\n<p>\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0432\u044b \u0443\u0436\u0435 \u0441\u0442\u0430\u043b\u043a\u0438\u0432\u0430\u043b\u0438\u0441\u044c \u0441\u043e \u0441\u0432\u043e\u0439\u0442\u0432\u043e\u043c <strong>scrollbar-color, <\/strong>\u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0446\u0432\u0435\u0442 \u0441\u043a\u0440\u043e\u043b\u043b\u0431\u0430\u0440\u0430, \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u043e\u0442 \u043a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043e\u043d\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u043c Firefox.<\/p>\n<pre><code>body {   scrollbar-color: color1 color2; }<\/code><\/pre>\n<p> \u042d\u0442\u043e \u043a\u043e\u043d\u0435\u0447\u043d\u043e \u0437\u0434\u043e\u0440\u043e\u0432\u043e, \u043d\u043e \u0441\u0440\u0430\u0437\u0443 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u0432\u043e\u043f\u0440\u043e\u0441: &#8216;\u0415\u0441\u0442\u044c \u043b\u0438 \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u0430 \u0434\u043b\u044f \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432? &#8216; \u0410\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u0430 \u0435\u0441\u0442\u044c \u0438 \u0438\u043c\u044f \u0435\u0439: <strong>Vendor-prefixes. <\/strong><\/p>\n<pre><code>::-webkit-scrollbar {   \/* \u0426\u0432\u0435\u0442 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 *\/   background-color: color2; } ::-webkit-scrollbar-thumb {   \/* \u0426\u0432\u0435\u0442 \u043f\u043e\u043b\u0437\u0443\u043d\u043a\u0430 *\/   background-color: color1; }<\/code><\/pre>\n<p>\u041e\u0434\u043d\u0430\u043a\u043e, \u0441\u0442\u043e\u0438\u0442 \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u0435\u0441\u043b\u0438 \u043c\u044b \u0438\u0437\u043c\u0435\u043d\u0438\u043c \u0446\u0432\u0435\u0442 \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0442\u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0442\u043e\u043f\u043e\u0440\u043d\u044b\u043c \u0434\u043b\u044f \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432, \u0442\u0430\u043a \u043a\u0430\u043a \u043c\u044b \u0437\u0430\u0442\u0438\u0440\u0430\u0435\u043c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0441\u043a\u0440\u043e\u043b\u043b\u0431\u0430\u0440\u0430. \u0412\u043e\u0442 \u0432\u0430\u043c \u0434\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445 Chrome \u0438 Firefox:<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"\/img\/image-loader.svg\" height=\"884\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/3fc\/d52\/1f6\/3fcd521f62b068870284be3dfef53f2a.png\" data-width=\"1434\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0427\u0442\u043e\u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443 \u043f\u043e\u043b\u0443\u0447\u0448\u0435 \u0438 \u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e\u0433\u043e \u0432\u043d\u0435\u0448\u043d\u0435\u0433\u043e \u0432\u0438\u0434\u0430 \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043d\u0430\u043a\u0438\u043d\u0443\u0442\u044c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0441\u0442\u0438\u043b\u0435\u0439 (\u043d\u0430 \u043d\u0430\u0448\u0435 \u0441\u0447\u0430\u0441\u0442\u044c\u0435 \u043f\u0441\u0435\u0432\u0434\u043e\u044d\u043b\u0435\u043c\u0435\u043d\u0442 -webkit-scrollbar \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0430\u043c \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c):<\/p>\n<pre><code>&lt;style>   html {     --background: hsl(210deg, 15%, 6.25%);     --text: hsl(210deg, 10%, 90%);     --gray-300: hsl(210deg, 10%, 40%);     --gray-500: hsl(210deg, 8%, 50%);      \/* Official styles (Firefox) *\/     scrollbar-color:       var(--gray-300)       var(--background);     scrollbar-width: thin;   }    ::-webkit-scrollbar {     width: 10px;     background-color: var(--background);   }   ::-webkit-scrollbar-thumb {     border-radius: 1000px;     background-color: var(--gray-300);     border: 2px solid var(--background);   }   \/*     Little bonus: on non-Firefox browsers,     the thumb will light up on hover!   *\/   ::-webkit-scrollbar-thumb:hover {     background-color: var(--gray-500);   } &lt;\/style><\/code><\/pre>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"\/img\/image-loader.svg\" alt=\"Josh W Comeau \u043f\u0440\u043e\u0441\u0442\u043e \u043b\u0443\u0447\u0448\u0438\u0439)\" title=\"Josh W Comeau \u043f\u0440\u043e\u0441\u0442\u043e \u043b\u0443\u0447\u0448\u0438\u0439)\" height=\"830\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/330\/9a2\/1c1\/3309a21c1191c1a4f42bc80379dafbb7.gif\" data-width=\"1108\"\/><figcaption>Josh W Comeau \u043f\u0440\u043e\u0441\u0442\u043e \u043b\u0443\u0447\u0448\u0438\u0439)<\/figcaption><\/figure>\n<p>\u041d\u0443 \u0432\u043e\u0442 \u0438 \u0432\u0441\u0435,  \u0434\u0440\u0443\u0437\u044c\u044f \u043c\u043e\u0438, \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u043b \u0432\u0430\u043c \u043e\u0431\u043e \u0432\u0441\u0435\u0445 \u043c\u043e\u043c\u0435\u043d\u0442\u0430\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0430\u043d\u044c\u0448\u0435 \u0443 \u043c\u0435\u043d\u044f \u0432\u044b\u0437\u044b\u0432\u0430\u043b\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0435 \u0442\u0440\u0443\u0434\u043d\u043e\u0441\u0442\u0438. \u0414\u0430\u043d\u043d\u0430\u044f \u0437\u0430\u043c\u0435\u0442\u043a\u0430 &#8212; \u044d\u0442\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e \u0432\u0441\u0435\u0433\u043e \u043b\u0438\u0448\u044c &#8216;\u041a\u0430\u043f\u043b\u044f \u0432 \u043c\u043e\u0440\u0435&#8217; \u0438 \u0443 \u0432\u0430\u0441 100% \u043d\u0430\u0439\u0434\u0435\u0442\u0441\u044f \u0435\u0449\u0435 \u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0432\u043e\u043f\u0440\u043e\u0441\u043e\u0432 \u0438 \u0440\u0430\u0437\u043d\u043e\u0433\u043e \u0440\u043e\u0434\u0430 \u0443\u0442\u043e\u0447\u043d\u0435\u043d\u0438\u0439, a \u0442\u0430\u043a\u0436\u0435 \u0437\u0430\u043c\u0435\u0447\u0430\u043d\u0438\u0439, \u043d\u0430\u0434\u0435\u044e\u0441\u044c \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0438\u0445 \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445 (\u044f \u043f\u043e\u043a\u0430 \u0435\u0449\u0435 \u0443\u0447\u0443\u0441\u044c, \u0442\u0430\u043a \u0447\u0442\u043e \u043d\u0435 \u0441\u0443\u0434\u0438\u0442\u0435 \u0441\u0442\u0440\u043e\u0433\u043e). <\/p>\n<p>\u0412 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u044e \u0435\u0449\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043d\u0430\u0431\u043e\u043b\u044c\u0448\u0443\u044e \u0437\u0430\u043c\u0435\u0442\u043a\u0443 \u043f\u0440\u043e 2 \u0434\u0440\u0443\u0433\u0438\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0435 \u0442\u0435\u043c\u044b, \u043a\u0430\u0441\u0430\u044e\u0449\u0438\u0435\u0441\u044f \u0441\u043a\u0440\u043e\u043b\u043b\u0430: Cumulative Layout Shifts \u0438 Scroll Snapping. <\/p>\n<p>\u041e\u0447\u0435\u043d\u044c \u043d\u0430\u0434\u0435\u044e\u0441\u044c, \u0447\u0442\u043e \u0432\u0430\u043c \u0431\u044b\u043b\u043e \u0445\u043e\u0442\u044c \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u043e \u0438 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e!<\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"v-portal\" style=\"display:none;\"><\/div>\n<\/div>\n<p> <!----> <!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/post\/645259\/\"> https:\/\/habr.com\/ru\/post\/645259\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u041f\u0440\u0438\u0432\u0435\u0442, \u0425\u0430\u0431\u0440! <\/p>\n<p>\u041d\u0430\u0447\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u0443\u044e \u0441\u0442\u0430\u0442\u044c\u044e \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0431\u044b \u0441 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u043b\u0438\u0440\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u043e\u0442\u0441\u0442\u0443\u043f\u043b\u0435\u043d\u0438\u044f. \u041d\u0435\u0434\u0430\u0432\u043d\u043e, \u0432 \u043e\u0447\u0435\u0440\u0435\u0434\u043d\u043e\u0439 \u0440\u0430\u0437 \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u0432\u0448\u0438\u0441\u044c \u0441\u043e \u0441\u043b\u043e\u0436\u043d\u044b\u043c \u043a\u0435\u0439\u0441\u043e\u043c \u043d\u0430 \u0440\u0430\u0431\u043e\u0442\u0435 \u0438 \u043f\u0440\u043e\u0448\u0435\u0440\u0441\u0442\u0438\u0432 \u0434\u043e\u0431\u0440\u0443\u044e \u043f\u043e\u043b\u043e\u0432\u0438\u043d\u0443 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0430 \u0432 \u043f\u043e\u0438\u0441\u043a\u0430\u0445 \u0438\u0441\u0442\u0438\u043d\u044b, \u043f\u043e\u043f\u0443\u0442\u043d\u043e \u043f\u0440\u0438\u043e\u0431\u0440\u0435\u0442\u044f \u0441 \u0434\u0435\u0441\u044f\u0442\u043e\u043a \u0441\u0435\u0434\u044b\u0445 \u0432\u043e\u043b\u043e\u0441, \u0443 \u043c\u0435\u043d\u044f \u043d\u0430\u0447\u0430\u043b\u043e \u0431\u043e\u043b\u0435\u0442\u044c \u0441\u0435\u0440\u0434\u0435\u0447\u043a\u043e \u0437\u0430 \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0449\u0438\u0445 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0441\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u044b\u0431\u0440\u0430\u043b\u0438 \u043d\u0435\u043b\u0435\u0433\u043a\u0438\u0439 \u043f\u0443\u0442\u044c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 JS. \u041a\u0430\u043a \u0432\u044b, \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e, \u0434\u043e\u0433\u0430\u0434\u0430\u043b\u0438\u0441\u044c, \u0441\u0430\u043c \u044f \u043d\u0435 \u043e\u0442\u043d\u043e\u0448\u0443\u0441\u044c \u043a \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438 \u043b\u044e\u0434\u0435\u0439 &#8216;\u0412 \u0434\u0435\u0442\u0441\u0442\u0432\u0435 \u043c\u0430\u043c\u0430 \u0432\u043a\u043b\u044e\u0447\u0430\u043b\u0430 \u043c\u043d\u0435 \u0432\u043c\u0435\u0441\u0442\u043e \u043c\u0443\u043b\u044c\u0442\u0438\u043a\u043e\u0432 \u043a\u0443\u0440\u0441\u044b Javascript \u0434\u043b\u044f \u0441\u0430\u043c\u044b\u0445 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0445, \u0432 5 \u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043b \u0441\u0432\u043e\u0439 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442 \u043c\u0430\u0433\u0430\u0437\u0438\u043d,\u0430 \u0432 10 \u0432 \u043f\u0435\u0440\u0432\u044b\u0439 \u0440\u0430\u0437 \u0432\u0437\u043b\u043e\u043c\u0430\u043b \u0441\u0430\u0439\u0442 \u041f\u0435\u043d\u0442\u0430\u0433\u043e\u043d\u0430&#8217;. \u0423\u0434\u0438\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e, \u043d\u043e \u043d\u0430 \u043f\u043e\u0445\u043e\u0436\u0438\u0435 \u0440\u0435\u0437\u044e\u043c\u0435 \u044f \u043d\u0435 \u0440\u0430\u0437 \u043d\u0430\u0442\u044b\u043a\u0430\u043b\u0441\u044f \u043d\u0430 \u043f\u0440\u043e\u0441\u0442\u043e\u0440\u0430\u0445 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0430, \u0442\u0435 \u0441\u0430\u043c\u044b\u0435 25-\u0442\u0438 \u043b\u0435\u0442\u043d\u0438\u0435 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0441\u0442\u044b \u0441 22-\u0445 \u043b\u0435\u0442\u043d\u0438\u043c \u043e\u043f\u044b\u0442\u043e\u043c \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0442 \u0438, \u043d\u0430\u0432\u0435\u0440\u043d\u043e\u0435, \u043d\u0435 \u0438\u043c\u0435\u044e\u0442 \u0442\u0435\u0445 \u043f\u0440\u043e\u0431\u043b\u0435\u043c, \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0441\u0442\u0430\u043b\u043a\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u043c\u043d\u0435 &#8212; \u0447\u0435\u043b\u043e\u0432\u0435\u043a\u0443, \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0434\u0430\u0451\u0442\u0441\u044f \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043d\u0435\u043b\u0435\u0433\u043a\u043e \u0438 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u043e \u043d\u0435\u0434\u0430\u0432\u043d\u0435\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0441\u0447\u0438\u0442\u0430\u043b, \u0447\u0442\u043e \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u0434 \u043c\u043e\u0433\u0443\u0442 \u043f\u0438\u0441\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043b\u044e\u0434\u0438 \u0441\u043e \u0441\u0432\u0435\u0440\u0445\u0440\u0430\u0437\u0443\u043c\u043e\u043c \u0438 \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0431\u043e\u044f\u043b\u0441\u044f \u0434\u0430\u0436\u0435 \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c. \u042f \u0441\u0447\u0438\u0442\u0430\u044e, \u0447\u0442\u043e \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a \u044f \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u043e\u0447\u0435\u043d\u044c \u043c\u043d\u043e\u0433\u043e, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u044f \u0431\u0435\u0437\u0443\u043c\u043d\u044b\u0439 \u0440\u043e\u0441\u0442 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u043e\u0441\u0442\u0438 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f (\u0438 Javascript \u0432 \u0447\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u0438) \u0432 \u0448\u0438\u0440\u043e\u043a\u0438\u0445 \u043c\u0430\u0441\u0441\u0430\u0445 \u0432 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0435 \u0432\u0440\u0435\u043c\u044f. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0440\u0435\u0448\u0438\u043b \u043f\u0435\u0440\u0438\u043e\u0434\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u0430\u0442\u044c \u0437\u0434\u0435\u0441\u044c \u0441\u0432\u043e\u0438 \u0437\u0430\u043c\u0435\u0442\u043a\u0438 \u0438 \u043a\u0435\u0439\u0441\u044b, \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u044f \u0441\u0442\u0430\u043b\u043a\u0438\u0432\u0430\u043b\u0441\u044f \u0432 \u0440\u0430\u0431\u043e\u0442\u0435 \u0438 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u043b\u0438 \u0443 \u043c\u0435\u043d\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0435 \u0442\u0440\u0443\u0434\u043d\u043e\u0441\u0442\u0438, \u0447\u0442\u043e\u0431\u044b \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043e\u0431\u043b\u0435\u0433\u0447\u0438\u0442\u044c \u0436\u0438\u0437\u043d\u044c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c, \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u044e\u0449\u0438\u043c \u0441\u0445\u043e\u0436\u0438\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b.<\/p>\n<p>P.S. \u044f \u043d\u0435 \u043f\u0440\u0435\u0442\u0435\u043d\u0434\u0443\u044e \u043d\u0430 \u044d\u043a\u0441\u043f\u0435\u0440\u0442\u043d\u043e\u0441\u0442\u044c \u0437\u043d\u0430\u043d\u0438\u0439, \u043f\u043e\u044d\u0442\u043e\u043c\u0443, \u0441 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0439 \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e\u0441\u0442\u044c\u044e \u043c\u043e\u0433\u0443\u0442 \u043d\u0430\u0439\u0442\u0438\u0441\u044c \u043a\u0443\u0434\u0430 \u0431\u043e\u043b\u0435\u0435 \u043e\u043f\u0442\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f. \u041f\u043e\u043c\u043d\u0438\u0442\u0435: &#8216;\u042f \u0445\u0443\u0434\u043e\u0436\u043d\u0438\u043a &#8212; \u044f \u0442\u0430\u043a \u0432\u0438\u0436\u0443&#8217;.<\/p>\n<p>\u0410 \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u043b\u0430\u0432\u043d\u043e \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043a \u0442\u0435\u043c\u0435 \u0441\u0442\u0430\u0442\u044c\u0438. \u041d\u0438\u0436\u0435 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d \u0441\u043f\u0438\u0441\u043e\u043a \u0432\u043e\u043f\u0440\u043e\u0441\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u044f \u043f\u043e\u0441\u0442\u0430\u0440\u0430\u044e\u0441\u044c \u043e\u0441\u0432\u0435\u0442\u0438\u0442\u044c \u0432 \u0434\u0430\u043d\u043d\u043e\u0439 \u0437\u0430\u043c\u0435\u0442\u043a\u0435:<\/p>\n<ul>\n<li>\n<p>\u041a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u0441 \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0439 \u0448\u0430\u043f\u043a\u043e\u0439 \u0438 \u0441\u043a\u0440\u043e\u043b\u043b\u043e\u043c \u0432 body?<\/p>\n<\/li>\n<li>\n<p>\u041a\u0430\u043a \u0431\u044b\u0442\u044c, \u043a\u043e\u0433\u0434\u0430 c\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0441\u044a\u0435\u0437\u0436\u0430\u0435\u0442 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0448\u0430\u043f\u043a\u0438 \u043f\u0440\u0438 \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u0438 \u0441\u043a\u0440\u043e\u043b\u043b\u0430? \u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 css-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 scroll-width.<\/p>\n<\/li>\n<li>\n<p>\u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0438 \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0441\u043a\u0440\u043e\u043b\u043b\u0430: \u043f\u043b\u0430\u0432\u043d\u043e\u0441\u0442\u044c, scroll margin, \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0446\u0432\u0435\u0442\u0430 \u0438 \u0444\u043e\u0440\u043c\u044b.<\/p>\n<\/li>\n<\/ul>\n<h2>\u041a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u0441 \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0439 \u0448\u0430\u043f\u043a\u043e\u0439 \u0438 \u0441\u043a\u0440\u043e\u043b\u043b\u043e\u043c \u0432 body?<\/h2>\n<p>\u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0441\u0430\u043c\u0443\u044e \u043e\u0431\u044b\u043a\u043d\u043e\u0432\u0435\u043d\u043d\u0443\u044e \u0442\u0430\u0431\u043b\u0438\u0447\u043a\u0443 \u0438 \u0437\u0430\u043f\u043e\u043b\u043d\u0438\u043c \u0435\u0435 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u0438\u0437 faker \u0434\u043b\u044f \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e\u0441\u0442\u0438. \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a\u0443\u044e \u043a\u0430\u0440\u0442\u0438\u043d\u0443(\u0432\u0435\u0440\u0441\u0442\u043a\u0443 \u0434\u0435\u043b\u0430\u0435\u043c \u0441\u0430\u043c\u0443\u044e \u0431\u0430\u0437\u043e\u0432\u0443\u044e, \u043f\u0440\u043e\u0441\u0442\u043e \u0447\u0442\u043e\u0431\u044b \u0433\u043b\u0430\u0437 \u043d\u0435 \u0434\u0435\u0440\u0433\u0430\u043b\u0441\u044f \u043e\u0442 \u043e\u0434\u043d\u043e\u0433\u043e \u0435\u0435 \u0432\u0438\u0434\u0430):<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<details class=\"spoiler\">\n<summary>\u041a\u043e\u0434<\/summary>\n<div class=\"spoiler__content\">\n<pre><code>import React from 'react'; import { render } from 'react-dom'; import faker from 'faker'; import '.\/index.css';  \/\/ \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435 const users = Array(100).fill(null).map(() => ({   id: faker.random.uuid(),   first: faker.name.firstName(),   last: faker.name.lastName(),   email: faker.internet.email(), }));  const App = () => (         &lt;table >           &lt;thead>             &lt;tr>               &lt;th>First&lt;\/th>               &lt;th>Last&lt;\/th>               &lt;th>Email&lt;\/th>             &lt;\/tr>           &lt;\/thead>           &lt;tbody>             {users.map(x => (               &lt;tr key={x.id}>                 &lt;td>{x.first}&lt;\/td>                 &lt;td>{x.last}&lt;\/td>                 &lt;td>{x.email}&lt;\/td>               &lt;\/tr>             ))}           &lt;\/tbody>         &lt;\/table> );  render(&lt;App \/>, document.getElementById('root'));<\/code><\/pre>\n<pre><code>table {   width: 100%;   border-collapse: collapse;   border-spacing: 0; }  thead {   background-color: teal; }  td, th {   padding: 15px;   text-align: left; }  th {   color: white; }<\/code><\/pre>\n<\/div>\n<\/details>\n<p>\u041a\u0430\u043a \u043c\u044b \u0432\u0438\u0434\u0438\u043c, \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0441\u043d\u0430\u0440\u0443\u0436\u0438 \u0443 \u043d\u0430\u0441 \u043f\u043e\u044f\u0432\u0438\u043b\u0441\u044f \u0441\u043a\u0440\u043e\u043b\u043b, \u043d\u043e \u043d\u0430\u043c \u0442\u0430\u043a\u0430\u044f \u0431\u043e\u043b\u044c\u0448\u0430\u044f \u0442\u0430\u0431\u043b\u0438\u0446\u0430 \u043d\u0435 \u043d\u0443\u0436\u043d\u0430, \u043f\u043e \u0443\u0441\u043b\u043e\u0432\u0438\u044e \u043c\u044b \u0445\u043e\u0442\u0438\u043c, \u0447\u0442\u043e\u0431\u044b \u0441\u043a\u0440\u043e\u043b\u043b \u0443 \u043d\u0430\u0441 \u0431\u044b\u043b \u0442\u043e\u043b\u044c\u043a\u043e \u0443 \u0442\u0435\u043b\u0430 \u0442\u0430\u0431\u043b\u0438\u0446\u044b, \u0430 header \u043d\u0430\u0434 \u0432\u0441\u0435\u043c \u044d\u0442\u0438\u043c \u0434\u0435\u043b\u043e\u043c \u043d\u0430\u0432\u0438\u0441\u0430\u043b \u0441\u0432\u0435\u0440\u0445\u0443, \u043d\u0443 \u0438 \u0447\u0442\u043e\u0431\u044b \u0432 \u0432\u044b\u0441\u043e\u0442\u0443 \u043d\u0430\u0448\u0430 \u0442\u0430\u0431\u043b\u0438\u0447\u043a\u0430 \u0431\u044b\u043b\u0430 \u043d\u0435 \u0431\u043e\u043b\u044c\u0448\u0435 200 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439. \u0412 \u043e\u0431\u0449\u0435\u043c, \u0447\u0442\u043e-\u0442\u043e \u043d\u0430\u043f\u043e\u0434\u043e\u0431\u0438\u0435 \u0432\u043e\u0442 \u044d\u0442\u043e\u0433\u043e:<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u041d\u0443\u0436\u043d\u043e\u0433\u043e \u043d\u0430\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430 \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c\u0438 \u0441\u043f\u043e\u0441\u043e\u0431\u0430\u043c\u0438:<\/p>\n<ol>\n<li>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u043f\u043e \u0442\u0438\u043f\u0443 React-Table, React-Virtualized, \u043b\u0438\u0431\u043e \u043a\u0430\u043a\u0443\u044e-\u043d\u0438\u0431\u0443\u0434\u044c \u0435\u0449\u0435, \u0447\u0442\u043e\u0431\u044b \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0435 \u0437\u0430\u043c\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0442\u044c\u0441\u044f. \u041d\u0430\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e \u0440\u0435\u043a\u043e\u043c\u043c\u0435\u043d\u0434\u0443\u044e \u0445\u043e\u0442\u044f \u0431\u044b \u0441 \u043e\u0434\u043d\u043e\u0439 \u0438\u0437 \u043d\u0438\u0445 \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043e\u043d\u0438 \u043e\u0447\u0435\u043d\u044c \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u0431\u043b\u0435\u0433\u0447\u0430\u044e\u0442 \u0436\u0438\u0437\u043d\u044c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u043f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u0442\u0430\u0431\u043b\u0438\u0446\u0430\u043c\u0438.<\/p>\n<\/li>\n<li>\n<p>\u041d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u043e\u0434\u0448\u0430\u043c\u0430\u043d\u0438\u0442\u044c CSS, \u0447\u0435\u043c \u043c\u044b \u0441\u0435\u0439\u0447\u0430\u0441 \u0438 \u0437\u0430\u0439\u043c\u0435\u043c\u0441\u044f<\/p>\n<\/li>\n<\/ol>\n<figure class=\"full-width\"><figcaption>\u042d\u0442\u043e \u043e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u043f\u0440\u0438\u0447\u0438\u043d\u0430, \u043f\u043e\u0447\u0435\u043c\u0443 \u044f \u0441\u043e\u0432\u0435\u0442\u0443\u044e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u043c\u0438<\/figcaption><\/figure>\n<p>\u041f\u0435\u0440\u0432\u043e\u0435,\u0447\u0442\u043e \u043c\u043d\u0435 \u043b\u0438\u0447\u043d\u043e \u043f\u0440\u0438\u0448\u043b\u043e \u043d\u0430 \u0443\u043c, \u043a\u043e\u0433\u0434\u0430 \u044f \u0432 \u043f\u0435\u0440\u0432\u044b\u0439 \u0440\u0430\u0437 \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0441\u044f \u0441 \u043f\u043e\u0434\u043e\u0431\u043d\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0435\u0439 &#8212; \u043d\u0443\u0436\u043d\u043e \u0432\u0441\u0435\u0433\u043e \u043b\u0438\u0448\u044c \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e display \u0443 \u0442\u0435\u0433\u043e\u0432 tbody \u0438 thead \u043d\u0430 &#8216;block&#8217; \u0438 \u043d\u0430\u043a\u0438\u043d\u0443\u0442\u044c \u043d\u0430 tbody \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0435 \u043f\u043e \u0432\u044b\u0441\u043e\u0442\u0435 (\u0437\u0434\u0435\u0441\u044c \u044f \u0441\u0447\u0438\u0442\u0430\u044e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u043c \u043f\u0440\u043e\u044f\u0441\u043d\u0438\u0442\u044c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043c\u043e\u043c\u0435\u043d\u0442, \u0432\u044b\u0437\u044b\u0432\u0430\u044e\u0449\u0438\u0439 \u0442\u0440\u0443\u0434\u043d\u043e\u0441\u0442\u0438 \u0443 \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0449\u0438\u0445: \u043c\u043d\u043e\u0433\u0438\u0435 \u043f\u044b\u0442\u0430\u044e\u0442\u0441\u044f \u043f\u0440\u043e\u0441\u0442\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u0432\u044b\u0441\u043e\u0442\u0443 \u0434\u043b\u044f body, \u0430 \u043f\u043e\u0442\u043e\u043c \u043d\u0435 \u043c\u043e\u0433\u0443\u0442 \u043f\u043e\u043d\u044f\u0442\u044c, \u043f\u043e\u0447\u0435\u043c\u0443 \u044d\u0442\u043e \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442. \u041d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0435 \u0437\u0430\u0431\u044b\u0442\u044c \u0435\u0449\u0435 \u043f\u0440\u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e overflow, \u0438 \u0432\u0441\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f).<\/p>\n<p>\u0417\u0430\u0447\u0435\u043c \u043d\u0430\u043c \u043c\u0435\u043d\u044f\u0442\u044c display?  \u0414\u0435\u043b\u043e \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e display \u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 thead \u0438 tbody \u0438\u043c\u0435\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 row-group(table-header-group \u0438 table-row-group \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e), \u0447\u0442\u043e \u0432 \u0441\u0432\u043e\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u043d\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0430\u043c \u0432\u0432\u043e\u0434\u0438\u0442\u044c \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0435 \u043f\u043e \u0432\u044b\u0441\u043e\u0442\u0435, \u0430 \u0437\u043d\u0430\u0447\u0438\u0442 \u0438 \u0441\u043a\u0440\u043e\u043b\u043b\u0430 \u0443 \u043d\u0438\u0445 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u043c\u0435\u043d\u044f\u0435\u043c \u0438\u0445 \u043d\u0430 \u043f\u043e\u043d\u044f\u0442\u043d\u044b\u0439 \u043d\u0430\u043c  display: &#8216;block&#8217;, \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043f\u0440\u043e\u0449\u0435 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c . <\/p>\n<details class=\"spoiler\">\n<summary>\u041d\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u043b\u043a\u0430 \u043f\u0440\u043e \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 height \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0430\u0445<\/summary>\n<div class=\"spoiler__content\">\n<p>\u041a\u043e\u0433\u0434\u0430 \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0435 \u0437\u0430\u0434\u0430\u043d\u00a0<strong>&lt;!DOCTYPE><\/strong>, \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u0438\u0433\u043d\u043e\u0440\u0438\u0440\u0443\u044e\u0442 \u0432\u044b\u0441\u043e\u0442\u0443 \u0442\u0430\u0431\u043b\u0438\u0446\u044b, \u0437\u0430\u0434\u0430\u043d\u043d\u0443\u044e \u0447\u0435\u0440\u0435\u0437 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u00a0height. \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0432\u044b\u0441\u043e\u0442\u0430 \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e \u0442\u0430\u0431\u043b\u0438\u0446\u044b.<\/p>\n<\/div>\n<\/details>\n<p>\u0417\u0434\u0435\u0441\u044c \u0435\u0441\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u044b\u0436\u043d\u044b\u0445 \u043c\u043e\u043c\u0435\u043d\u0442\u043e\u0432, \u043e \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043d\u0435 \u0441\u0442\u043e\u0438\u0442 \u0437\u0430\u0431\u044b\u0432\u0430\u0442\u044c:<\/p>\n<ol>\n<li>\n<p>\u041c\u0435\u043d\u044f\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e display \u043d\u0430 &#8216;block&#8217;, \u043c\u044b \u043a\u0430\u043a \u0431\u044b \u043b\u043e\u043c\u0430\u0435\u043c \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u043a\u0443, \u0438 \u043d\u0430\u0448 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0443\u0436\u0435 \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u0441\u0447\u0438\u0442\u0430\u0435\u0442 \u043d\u0430\u0448\u0443 \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u0442\u0430\u0431\u043b\u0438\u0446\u0435\u0439, \u0447\u0442\u043e \u0442\u0430\u043a\u0436\u0435 \u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u0432\u043b\u0438\u044f\u043d\u0438\u0435 \u043d\u0430 \u0441\u043a\u0440\u0438\u043d\u0440\u0438\u0434\u0435\u0440\u044b. <\/p>\n<\/li>\n<li>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u0448 \u0442\u0435\u0433 tr \u0443\u0436\u0435 \u043d\u0435 \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u0432\u0441\u0435 \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u0438 \u0442\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0432\u0441\u0435 \u044d\u0442\u043e \u0434\u0435\u043b\u043e \u0432\u044b\u0440\u043e\u0432\u043d\u044f\u0442\u044c.<\/p>\n<\/li>\n<\/ol>\n<figure class=\"full-width\"><figcaption>\u0414\u043b\u044f \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e\u0441\u0442\u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043b border.<\/figcaption><\/figure>\n<details class=\"spoiler\">\n<summary>\u041a\u043e\u0434<\/summary>\n<div class=\"spoiler__content\">\n<pre><code>import React from 'react'; import { render } from 'react-dom'; import faker from 'faker'; import '.\/index.css';  \/\/ \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435 const users = Array(100).fill(null).map(() => ({   id: faker.random.uuid(),   first: faker.name.firstName(),   last: faker.name.lastName(),   email: faker.internet.email(), }));  const App = () => (         &lt;table >           &lt;thead>             &lt;tr>               &lt;th>First&lt;\/th>               &lt;th>Last&lt;\/th>               &lt;th>Email&lt;\/th>             &lt;\/tr>           &lt;\/thead>           &lt;tbody>             {users.map(x => (               &lt;tr key={x.id}>                 &lt;td>{x.first}&lt;\/td>                 &lt;td>{x.last}&lt;\/td>                 &lt;td>{x.email}&lt;\/td>               &lt;\/tr>             ))}           &lt;\/tbody>         &lt;\/table> );  render(&lt;App \/>, document.getElementById('root')); <\/code><\/pre>\n<pre><code>table {   width: 100%;   border-collapse: collapse;   border-spacing: 0; }  thead {   display: block;   background-color: teal; }  tbody {   display: block;   overflow-y: auto;   overflow-x: hidden;   max-height: 200px;   min-height: 100px; }  tr {   border: 1px solid black; }  td, th {   text-align: left;   padding: 15px; }  th {   color: white; }<\/code><\/pre>\n<\/div>\n<\/details>\n<p>\u041a\u0430\u043a \u0431\u0443\u0434\u0435\u043c \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0442\u044c?<\/p>\n<figure class=\"full-width\"><figcaption>\u041d\u0443, \u044f \u0434\u0443\u043c\u0430\u044e, \u0432\u044b \u043f\u043e\u043d\u044f\u043b\u0438<\/figcaption><\/figure>\n<p>\u0412 \u043e\u0431\u0449\u0435\u043c, \u0432 \u043b\u044e\u0431\u043e\u0439 \u043d\u0435\u043f\u043e\u043d\u044f\u0442\u043d\u043e\u0439 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 Flex \u0438\u043b\u0438 Grid \u0438 \u0431\u0443\u0434\u0435\u0442 \u0432\u0430\u043c \u0441\u0447\u0430\u0441\u0442\u044c\u0435. \u041d\u0438\u0436\u0435 \u043f\u0440\u0438\u0432\u0435\u0434\u0443 \u0434\u0432\u0430 \u0433\u043e\u0442\u043e\u0432\u044b\u0445 \u0431\u0430\u0437\u043e\u0432\u044b\u0445 \u043f\u0440\u0438\u043c\u0435\u0440\u0430, html \u0442\u0440\u043e\u0433\u0430\u0442\u044c \u043d\u0435 \u0431\u0443\u0434\u0443, \u043d\u043e \u044f \u0434\u0443\u043c\u0430\u044e, \u0447\u0442\u043e \u0438 \u0442\u0430\u043a \u043f\u043e\u043d\u044f\u0442\u043d\u043e, \u0447\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u0440\u0430\u0437\u0443 \u0432\u0435\u0440\u0441\u0442\u0430\u0442\u044c \u043d\u0430 div \u0438 \u043c\u0430\u0440\u043a\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0441\u043f\u0438\u0441\u043a\u0430\u0445 \u043f\u0440\u0438 \u0436\u0435\u043b\u0430\u043d\u0438\u0438. \u0414\u0430\u043b\u044c\u0448\u0435 \u0443\u0436\u0435 \u043f\u043e \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438 \u043c\u043e\u0436\u0435\u0442\u0435 \u0434\u043e\u0432\u0435\u0441\u0442\u0438 \u0434\u043e \u0443\u043c\u0430 \u0432\u0435\u0440\u0441\u0442\u043a\u0443, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440: \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0435 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u043f\u043e \u0448\u0438\u0440\u0438\u043d\u0435, \u043d\u0443\u0436\u043d\u044b\u0439 \u0432\u0430\u043c \u0444\u043e\u0440\u043c\u0430\u0442 \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0430 \u0441\u0442\u0440\u043e\u043a \u0438 \u0430\u0434\u0430\u043f\u0442\u0438\u0432, \u0435\u0441\u043b\u0438 \u043a\u043e\u043d\u0435\u0447\u043d\u043e \u043e\u043d \u043d\u0443\u0436\u0435\u043d, \u0442\u0430\u043a \u043a\u0430\u043a \u0432\u0441\u0435 \u0436\u0435 \u0432 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0435 \u0441\u0432\u043e\u0435\u043c \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0442\u0430\u0431\u043b\u0438\u0446 \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d \u0434\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u0430 \u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u044d\u043a\u0440\u0430\u043d\u0430\u0445. \u0412 \u043b\u044e\u0431\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u0430\u044f \u0432\u0435\u0440\u0441\u0442\u043a\u0430 \u043b\u0435\u0433\u043a\u043e \u0433\u0443\u0433\u043b\u0438\u0442\u0441\u044f.<\/p>\n<details class=\"spoiler\">\n<summary>\u0413\u043e\u0442\u043e\u0432\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0441 display: &#8216;Flex&#8217;<\/summary>\n<div class=\"spoiler__content\">\n<pre><code>import React from 'react'; import { render } from 'react-dom'; import faker from 'faker'; import '.\/index.css';  \/\/ \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435 const users = Array(100).fill(null).map(() => ({   id: faker.random.uuid(),   first: faker.name.firstName(),   last: faker.name.lastName(),   email: faker.internet.email(), }));  const App = () => (         &lt;table className='table'>           &lt;thead>             &lt;tr className='header'>               &lt;th className='firstColumn'>First&lt;\/th>               &lt;th className='secondColumn'>Last&lt;\/th>               &lt;th className='thirdColumn'>Email&lt;\/th>             &lt;\/tr>           &lt;\/thead>           &lt;tbody>             {users.map(x => (               &lt;tr className='body' key={x.id}>                 &lt;td className='firstColumn'>{x.first}&lt;\/td>                 &lt;td className='secondColumn'>{x.last}&lt;\/td>                 &lt;td className='thirdColumn'>{x.email}&lt;\/td>               &lt;\/tr>             ))}           &lt;\/tbody>         &lt;\/table> );  render(&lt;App \/>, document.getElementById('root')); <\/code><\/pre>\n<pre><code>table {   width: 100%;   border-collapse: collapse;   border-spacing: 0; }  thead {   background-color: teal;   color: white; }  thead, tbody, th, td {   display: block;   text-align: left; }  tbody {   overflow-y: auto;   overflow-x: hidden;   max-height: 200px;   min-height: 100px; }  tr {   display: flex; }  .firstColumn, .secondColumn {   flex: 1; }  .thirdColumn {   flex: 3; }  td, th {   padding: 15px;   overflow: hidden;   text-overflow: ellipsis;   white-space: nowrap; }<\/code><\/pre>\n<\/div>\n<\/details>\n<details class=\"spoiler\">\n<summary>\u0413\u043e\u0442\u043e\u0432\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0441 display &#8216;Grid&#8217;<\/summary>\n<div class=\"spoiler__content\">\n<pre><code>import React from 'react'; import { render } from 'react-dom'; import faker from 'faker'; import '.\/index.css';  \/\/ \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435 const users = Array(100).fill(null).map(() => ({   id: faker.random.uuid(),   first: faker.name.firstName(),   last: faker.name.lastName(),   email: faker.internet.email(), }));  const App = () => (         &lt;table className='table'>           &lt;thead>             &lt;tr className='header'>               &lt;th>First&lt;\/th>               &lt;th>Last&lt;\/th>               &lt;th>Email&lt;\/th>             &lt;\/tr>           &lt;\/thead>           &lt;tbody>             {users.map(x => (               &lt;tr className='body' key={x.id}>                 &lt;td>{x.first}&lt;\/td>                 &lt;td>{x.last}&lt;\/td>                 &lt;td>{x.email}&lt;\/td>               &lt;\/tr>             ))}           &lt;\/tbody>         &lt;\/table> );  render(&lt;App \/>, document.getElementById('root'));<\/code><\/pre>\n<pre><code>table {   width: 100%;   border-collapse: collapse;   border-spacing: 0; }  tr {   display: grid;   grid-template-columns: 1fr 1fr 2fr; }  thead {   background-color: teal;   color: white; }  thead, tbody, th, td {   display: block;   text-align: left; }  tbody {   overflow-y: auto;   overflow-x: hidden;   max-height: 200px;   min-height: 100px; }  td, th {   padding: 15px;<\/code><\/pre>\n<\/div>\n<\/details>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-327872","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/327872","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=327872"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/327872\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=327872"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=327872"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=327872"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}