Shulou(Shulou.com)06/01 Report--

This article will explain in detail how to use HTML5 to achieve scroll bar sliding effect. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

He told me the idea is to use js to get the height of the background picture, in obtaining the height of the current window, the comparison between the two, when the height of the window is less than the height of the background picture, set the height of the window to the height of the background color. On the contrary, it is the height of the window. It is too troublesome to use css to achieve his requirements:

The attribute min-height in the long background test / title > / / body is the key. It is said on the Internet that you can directly set it to 100vh. If you cannot fine-tune body {background:url (. / images/download_bg.png) no-repeat; background-size:100%; / / solution 1 min-height: 185vh / / scenario 2 is essentially equivalent to scenario 1. If both solutions are enabled at the same time, the height of the smaller one will be used, tested / / height:1200px;} # btn {margin-top: 150px; text-align: center;}

This is the code found on the Internet.

I changed it:

Body {background:-webkit-linear-gradient (to bottom, # 699eef, # 8e92ef); background:-o-linear-gradient (to bottom, # 699eef, # 8e92ef); background:-moz-linear-gradient (to bottom, # 699eef, # 8e92ef); background: linear-gradient (to bottom, # 699eef, # 8e92ef);}. App {width: 100%; / * height:900px; * / min-height: 120vh / * position: fixed; * / * top: 0; * / * left: 0; * / background: url ('.. /.. / images/bg.jpg') no-repeat; background-size: 100% auto;}

Add a background color to body that is the same as the color of the picture

Solve the problem.

This is the end of this article on "how to use HTML5 to achieve scroll bar sliding effect". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.