Failure investigation and replacement scheme of scrollIntoView
Problem background
Today, we need to do a function of clicking icon to slide to the article comment area, using scrollIntoView. It is found that the mobile terminal occasionally fails.
The code is as follows:
commentRef.current.scrollIntoView({
behavior: 'smooth',
});
analysis
Think about whether 1 is caused by a browser bug
accor ...
Posted by Formula on Thu, 03 Feb 2022 10:27:10 +0100
[css] responsive Web Design
Responsive Web design allows your Web pages to display well on all devices.
Responsive Web design uses only HTML and CSS.
Responsive Web design is not a program or Javascript script.
Learn the following from Rookie tutorial
Viewport
A viewport is a visual area of a user's web page.
The mobile browser places the page in a virtual "window&q ...
Posted by dan182skater on Thu, 03 Feb 2022 09:42:31 +0100
2022 dark horse programmer - first stage of front-end learning (day04 CSS advanced)
Learning video station B: Dark horse programmer - front end learning (phase I)
CSS advanced
Advanced of selector
compound selector
Descendant selector: spaces
Function: select the qualified elements in the descendants of parent elements according to the nesting relationship of HTML tags Selector syntax: selector 1 selector 2 {CSS} res ...
Posted by rakuci on Thu, 03 Feb 2022 08:40:53 +0100
CSS selector exercise restaurant exercise
Source code link:
https://pan.baidu.com/s/1cDehMieTufSbZRBR6sqVYQ Extraction code: x0pz
After downloading, double-click the index in the restaurant exercise directly HTML file, and then do it one by one
The answers are given in code snippets~
W3C description of CSS selector: CSS pseudo class
Level operation instructions:
1. Directly selec ...
Posted by musicdirector on Thu, 03 Feb 2022 08:18:13 +0100
[css] css grammar learning notes
Learning website The following are excerpted from the website
CSS introduction
CSS refers to cascading style sheets, which define how HTML elements are displayed.
CSS syntax
CSS rules consist of two main parts: selectors and one or more declarations.
Selectors are usually HTML elements that you need to change the style of.
Each declaration con ...
Posted by MatrixGL on Thu, 03 Feb 2022 00:41:33 +0100
The 15th day of study
Recently, there is a big data experiment to be done. I found that the virtual machine in the virtualbox used for big data only knocks the code. It's really tired. I can knock the double tags, but I can't copy them. After knocking for a day, people are numb, and I have to take CET-4 in a few days. I hope I can pass this time.
OK, or focus on w ...
Posted by tkj on Wed, 02 Feb 2022 07:29:01 +0100
Development of black horse CSS note mobile terminal
Flow layout of mobile WEB development
01 mobile terminal Foundation
1.1 browser status
1.2 current situation of mobile phone screen
02 viewport
A viewport is the area of the screen.
2.1 layout viewport
2.2 visual viewport
2.3 ideal viewport
2.5 meta viewport labels
2.6 standard viewport settings
<meta name="viewport" ...
Posted by dimxasnewfrozen on Wed, 02 Feb 2022 05:47:59 +0100
Consolidate JS optional (?.) Operation symbol, the original function can also be written in optional way, and learned again!
Author: Ashish Lahoti Translator: front end Xiaozhi Source: CSS tricket
There are dreams and dry goods. Wechat search [Daqian world] pays attention to this dish washing wisdom who is still washing dishes in the early morning.
This article GitHub https://github.com/qq449245884/xiaozhi It has been included. There are complete test sites, ...
Posted by jlommori on Wed, 02 Feb 2022 03:18:16 +0100
Web page cutting exercise - producer introduction card
Producer introduction card
target
Step 1.
Basic structure and text content Each item container has picture and text blocks
<body>
<div class="wrap">
<div class="item">
<img src="https://picsum.photos/300/300/?random=1">
<div class="txt">
<h2>CSS Coke ...
Posted by idontkno on Wed, 02 Feb 2022 02:29:47 +0100
Summary of several introduction methods and selectors of CSS
1, Cascading style sheets
Introduction
Cascading style sheets are used to represent HTML(Standard universal markup language An application of) or XML (a subset of the standard common markup language) and other file style computer languages. CSS can not only modify the web page statically, but also format the elements of the web page dynamical ...
Posted by ikebaldo on Tue, 01 Feb 2022 20:55:21 +0100