How to use pure css to achieve the effect of mobile phone address book-JS Tutorial-php.cn

The content of this article is about how to use pure CSS to achieve the effect of mobile phone address book. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

We often see address book lists on mobile phones. This type of layout generally has two significant effects

How to use pure css to achieve the effect of mobile phone address book

Initial letter ceiling
Quick positioning

Let’s implement it

Page structure

The page structure here is very simple, just two lists

<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><div>  <div> <dl>A <dt>a1</dt> <dt>a2</dt> <dl>B <dt>b1</dt> <dt>b2</dt> ... </dl> </dl> </div>  <div> <a>A</a> <a>B</a> </div> </div></pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div>

Then add some styles

html,body{
    margin: 0;
    height: 100%;
    padding: 0;
}
dl,dd{
    margin: 0;
}
.con{
    position: relative;
    height: 100%;
    overflow-x: hidden;
}
.index{
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.index a{
    display: block;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border-radius: 50%;
    background: cornflowerblue;
    text-decoration: none;
    color: #fff;
    outline: 0;
    margin: 5px;
}
.contacts{
    height: 100%;
    background: #fff;
    overflow: auto;
    line-height: 2em;
}
.contacts dt{
    background: bisque;
    font-size: 1.5rem;
    color:cornflowerblue;
    height: 2em;
    line-height: 2em;
    padding: 0 10px;
}
.contacts dd{
    padding: 0 10px;
    display: block;
    cursor: pointer;
}

Copy after login

So you can see the layout

Achieving the ceiling effect

The ceiling effect is actually very simple, just use the new attribute in cssposition:sticky

sticky A positioned element (stickily positioned element) is an element whose calculated position attribute is sticky.

The compatibility is pretty good, at least on the mobile side you can use it with confidence

How to use pure css to achieve the effect of mobile phone address book

Add position: sticky

.contacts dt{
    /*添加如下属性*/
    position: sticky;
    top: 0;
}

Copy after login

# to .contacts dt ##This achieves the ceiling effect of each category

Achieves quick positioning effect

If you don’t use js, you can use

href anchor Click to achieve positioning

The specific method is

<a></a>
...
...

<div></div>

Copy after login

If the entire page can be scrolled, then just click

a, then the page will quickly jump to## On the #id=A element Now add some

herf

and id<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><div>  <div> <dl>A <dt>a1</dt> <dt>a2</dt> <dl>B <dt>b1</dt> <dt>b2</dt> ... </dl> </dl> </div>  <div> <a>A</a> <a>B</a> </div> </div></pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div> to our page and click the navigation button on the right , the page can be quickly positioned

, etc., but there seems to be some problems. When jumping back, it is found that it is not fully expanded. For example, like calling back to

, the result is The A tag appears, but the list below A does not appear.

How to use pure css to achieve the effect of mobile phone address book What is the problem?

After many studies, I found out that position:sticky is responsible!

When positioning upward, we use href to position the past. The positioning is based on the position where the element is first visible. At this time, although the element is air compressor, the following elements are not displayed. , so it caused such a problem

When you find a problem, you need to solve it

Quick positioning effect repair

In fact, what we want to position is okay It is the first list element under

, but it cannot be this element, because if it is a first-generation element, it will be covered by the A tag above when it jumps. So we insert another label between the two for positioning

As follows, added

<div>
        <dl>A
        <dl>
        <dt>a1</dt>
        <dt>a2</dt>
        <dl>B
        <dl></dl>
        <dt>b1</dt>
        <dt>b2</dt>
        ...
    </dl>
</dl>
</dl>
</div>

Copy after login

If you put it directly here, it will definitely take up space, so we move it upward, and then set it to be invisible so that the element just covers the original label position

As follows

.contacts .stikcy-fix{
    position: static;
    visibility: hidden;
    margin-top: -2em;
}

Copy after login

Now Look, is it a perfect jump?

Other details

Usually when we select the index on the right, a capital letter will appear in the middle of the page

How to use pure css to achieve the effect of mobile phone address book It is relatively simple to implement this with css. Just use the content:attr() of the pseudo element. I also mentioned it in the previous article (using pure css to achieve the star effect)

The specific implementation is as follows

.index a:active:after{
    content: attr(data-type);
    position: fixed;
    left: 50%;
    top: 50%;
    width: 100px;
    height: 100px;
    border-radius: 5px;
    text-align: center;
    line-height: 100px;
    font-size: 50px;
    transform: translate(-50%,-50%);
    background: rgba(0,0,0,.5);
}

Copy after login

content: attr(data-type)

is used here, so a must have a data-type on it Attributes<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> <div> <a>A</a> <a>B</a> </div></pre><div class="contentsignin">Copy after login</div></div>Secondly, in actual projects, we need to use

to generate these listsAssume that the data we require is as follows

var data = [
        {
            'type':'A',
            'user':[
                {
                    name:'a1'
                },
                {
                    name:'a2'
                },
                {
                    name:'a3'
                },
                {
                    name:'a1'
                },
                {
                    name:'a2'
                },
                {
                    name:'a3'
                },
                {
                    name:'a3'
                },
                {
                    name:'a1'
                },
                {
                    name:'a2'
                },
                {
                    name:'a3'
                },
            ]
        },
        {
            'type':'B',
            'user':[
                {
                    name:'b1'
                },
                {
                    name:'b2'
                },
                {
                    name:'b3'
                },
                {
                    name:'b1'
                },
                {
                    name:'b2'
                },
                {
                    name:'b3'
                },
                {
                    name:'b3'
                },
                {
                    name:'b1'
                },
                {
                    name:'b2'
                },
                {
                    name:'b3'
                },
            ]
        },
        {
            'type':'C',
            'user':[
                {
                    name:'c1'
                },
                {
                    name:'c2'
                },
                {
                    name:'c3'
                },
                {
                    name:'c1'
                },
                {
                    name:'c2'
                },
                {
                    name:'c3'
                },
                {
                    name:'c3'
                },
                {
                    name:'c1'
                },
                {
                    name:'c2'
                },
                {
                    name:'c3'
                },
            ]
        },
        {
            'type':'D',
            'user':[
                {
                    name:'d1'
                },
                {
                    name:'d2'
                },
                {
                    name:'d3'
                },
                {
                    name:'d1'
                },
                {
                    name:'d2'
                },
                {
                    name:'d3'
                },
                {
                    name:'d3'
                },
                {
                    name:'d1'
                },
                {
                    name:'d2'
                },
                {
                    name:'d3'
                },
            ]
        },
        {
            'type':'E',
            'user':[
                {
                    name:'e1'
                },
                {
                    name:'e2'
                },
                {
                    name:'e3'
                },
                {
                    name:'e1'
                },
                {
                    name:'e2'
                },
                {
                    name:'e3'
                },
                {
                    name:'e3'
                },
                {
                    name:'e1'
                },
                {
                    name:'e2'
                },
                {
                    name:'e3'
                },
            ]
        }
    ]

Copy after login

Data in this format can be requested to be returned by the backend, or the front-end can be modified directly

Then just loop through the data

var indexs = document.getElementById('index');
var contacts = document.getElementById('contacts');
var index_html = '';
var contacts_html = '';
data.forEach(el=>{
    contacts_html += '

Copy after login

'+el.type+'
: '+d.name+'

' }) indexs.innerHTML = index_html; contacts.innerHTML = contacts_html;

This part of js only generates the layout, without any Functional logic

Some shortcomings

Although the list can be quickly positioned through anchor points, #A will be added to the browser's address bar at this time Such a logo is not good-looking, and secondly, when using the browser's default return, all these logos will be walked through, which is inconvenient.

There is another problem. When scrolling the list, the current category of the right index cannot be highlighted. At the same time, the right index does not support sliding quick positioning.

These detailed problems can only be fixed through js.

However, if it is a simple small project without so many requirements, pure CSS can still be applied very well. The performance is definitely many times better than scrolling monitoring through js, and it is easy to reference, as long as the data is generated. You can use

directly

The above is the detailed content of How to use pure css to achieve the effect of mobile phone address book. For more information, please follow other related articles on the PHP Chinese website!