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

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

1. Initial letter ceiling

2. Quick positioning

Let’s implement it

Page structure

The page structure here is very simple, just two lists

<pre class="brush:php;toolbar:false">&lt;div&gt;     &lt;!--联系人列表--&gt;     &lt;div&gt;         &lt;dl&gt;A         &lt;dt&gt;a1&lt;/dt&gt;         &lt;dt&gt;a2&lt;/dt&gt;         &lt;dl&gt;B         &lt;dt&gt;b1&lt;/dt&gt;         &lt;dt&gt;b2&lt;/dt&gt;         ...     &lt;/dl&gt; &lt;/dl&gt; &lt;/div&gt;     &lt;!--导航列表--&gt;     &lt;div&gt;         &lt;a&gt;A&lt;/a&gt;         &lt;a&gt;B&lt;/a&gt;     &lt;/div&gt; &lt;/div&gt;</pre>

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;
}

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

Add position: sticky

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

# 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>

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<pre class="brush:php;toolbar:false">&lt;div&gt;     &lt;!--联系人列表--&gt;     &lt;div&gt;         &lt;dl&gt;A         &lt;dt&gt;a1&lt;/dt&gt;         &lt;dt&gt;a2&lt;/dt&gt;         &lt;dl&gt;B         &lt;dt&gt;b1&lt;/dt&gt;         &lt;dt&gt;b2&lt;/dt&gt;         ...     &lt;/dl&gt; &lt;/dl&gt; &lt;/div&gt;     &lt;!--导航列表--&gt;     &lt;div&gt;         &lt;a&gt;A&lt;/a&gt;         &lt;a&gt;B&lt;/a&gt;     &lt;/div&gt; &lt;/div&gt;</pre> 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

A

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

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

A

, 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>

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;
}

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

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);
}

content: attr(data-type)

is used here, so a must have a data-type on it Attributes<pre class="brush:php;toolbar:false">&lt;!--导航列表--&gt; &lt;div&gt;     &lt;a&gt;A&lt;/a&gt;     &lt;a&gt;B&lt;/a&gt; &lt;/div&gt;</pre>Secondly, in actual projects, we need to use

js

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'
                },
            ]
        }
    ]

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 += '

'+el.type+'

';     index_html += ''+el.type+'';     el.user.forEach(d=>{         contacts_html+='

'+d.name+'

';     })     contacts_html+='

' }) 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!