https://www.mi.com/aispeaker-.
after scrolling to the location of the broadcast map, I found that the scroll bar will also continue to scroll, feeling that there is something fishy about it.
does anyone know the implementation details in this?
that's a good question.
take a look, in fact, the principle is relatively simple, but need to deal with related events, the specific implementation is still relatively tedious.
there are a total of 5 round broadcasts. The height of each rotation is the same as that of the current page and there is a parent container on the outside. The height of the parent container is the sum of the height of the five rotation.
when not scrolling to this area, all five broadcasts use absolute positioning. Once scrolled to this area, it will switch to fixed positioning and stick to the upper edge of the browser. At the same time, the scrolling distance is calculated, and only one rotation is displayed at the same time, and it will be switched to another when it is out of one rotation area.
so the browser scroll bar we see scrolls normally, because the browser scrolls five rotational parent containers. On the other hand, the display of the five rotations is switched by setting transparency. Personally, I think this practice of transparency is not very good and will affect performance, and it may be better to use display or visibility instead.
is mainly achieved by listening for scroll bar changes.
/ / listen for scroll bar changes
window.addEventListener ('scroll', () = > {
) const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
//scrollTopindex
});Previous: Why is the input height not valid?
is not to analyze user browsers, but to evoke Wechat app in Weibo app and open a link with Wechat app; WeChat Work can have this function, whether Weibo has a similar configuration. ...
use Wechat public platform JSSDK to develop Wechat sharing function! Every time I use the company s public platform account, I report a signature error! There is nothing wrong with the account of the public platform developed by myself! I would like to...
I use vue-cli to build the mobile project, and then use iframe to embed Youku s video code as follows <iframe width=100% height=350 src="http: player.youku.com embed XMzI1NTY2Nzc0MA==" frameborder=0 allowfullscreen>< iframe> th...
problem: the IOS system entered the page for the first time and added if (navigator.geolocation) {}, but did not execute navigator.geolocation.getCurrentPosition (this.showPosition.bind (this), this.showError.bind (this), options); did not enter showPo...
I found a js code from the Internet to calculate the time difference effect is that we have been together xx days xx xx minutes xx seconds problem is that this time will not change only enter the web page after refreshing to keep the same value so I...
for example, I set currentTime=20S, to start playing the video at 15s, and the address of my video is http: www.amdcu.net admin da.....
< H1 > problem description < H1 > while writing transition animation, I inadvertently found that sometimes the page would jam, and the Chrome memory of the viewing task manager suddenly soared. After various exclusions, I found that transform:skew (9...
The page does the function of the page before the jump after the completion of the event, using the method of adding returnUrl on Url, but when testing on the mobile side, a pop-up window will appear to show the path of the page to be redirected before r...
how to jump to a page to display the user s information page immediately after following Wechat s public platform? At the same time, it also displays the information of the user UnionID! I would like to ask all the masters! ...
use location.hash = "- sharpfooter " to navigate to the DOM node on the page where id is footer, then scroll to the click location and click again, it will not jump to the-sharpfooter position again, only the first click is valid ...
dynamic effects that are often overlooked are so important to user experience design Animation effect is an unavoidable link in user experience design, while in mobile interaction, dynamic effect exists as a transition lubricant and an important lin...
what if Android browsers always have the highest video tag level? Video is always at the top level, cover up some other div ...
,input ,input !!! edgevue elementui input(,),, input edge localhost:8080 ...
there is a mobile project currently in testing, using vue (2.2.2) + mint-ui for development, and I don t know how to handle compatibility. What method should be used to determine whether the current environment is working properly? I just looked at t...
as in the routing configuration above, there is no server, and it starts locally. In the case of mode: hash , the routed access will enter the corresponding component. In the case of mode: history , however, no matter which route is accessed, it ...
1. First of all, I have declared my font 2. 3. . 4. However, the above problems only occur in chrome and Firefox, where special fonts are successfully rendered on Safari . ...
for example, if you get a random number of 0 to 10, you can think of the following two kinds of Math.ceil(Math.random()*10); Math.floor(Math.random()*(10+1)); but see that someone says to use Math.ceil (Math.random () * 10); the chance of taking 0 is ...
js calls Android for voice recording Android returns the absolute path and duration of the audio file but how does js get the audio file through the absolute path and transfer the file to the background through file ...
sometimes normal and sometimes abnormal, use document.body.scrollTop = document.body.scrollHeight;; on the contrary, input will not be pushed up. Can you give me some advice? Thank you when the keyboard pops up, there is a value in document.body....
document.getElementsByTagName ( "html ") [0] .style.fontSize = (document.width?document.width:document.documentElement.clientWidth) * 0.0375 + "px "; ...