hutoolpost调用body参数有多层次

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了hutoolpost调用body参数有多层次相关的知识,希望对你有一定的参考价值。

参考技术A hutoolpost调用body参数,会有四个层次的上升空间,速度会更快。

怎样隐藏“滚动条”?

什么是“滚动条”?

滚动条是指图右侧被红线框起来的部分:

只要网页内容大于视图,滚动条就会出现。

一般来说,只要不是 body 层次的滚动条,使用 overflow: hidden; 就能解决滚动条出现的问题,但是此时页面也会变得无法捲动。

目前网络上已经有诸多可以隐藏非 body 层次的滚动条又可捲动页面的方法,所以本文主要聚焦于如何隐藏浏览器(也就是 body 层次)的滚动条。

解决方法

针对不同的浏览器,有不同的隐藏滚动条的方法,以下针对三大浏览器 chrome、ie(包括 edge)、Firefox 分别叙述:

Chorme
body::-webkit-sxrollbar {
    display: none;
}
IE/Edage
body {
    -ms-overflow-style: none;
}
Firefox

Firefox 是三者中最麻烦的:

html {
    overflow: -moz-hidden-unscrollable; /*注意!若只用 hidden,chrome 的其它 hidden 会出问题*/
    height: 100%;
}

body {
    height: 100%;
    width: calc(100vw + 18px); /*浏览器滚动条的长度大约是 18px*/
    overflow: auto;
}

到此还没有结束,你还要在一些地方加上 width: 100vw;

假设你的 html 长这样:

<body>
    <div id="example-1">
        <p>难臺子哥式自不家草要计在来也见加正活书。</p>
    </div>
    <article id="example-2">
        <h1>意家的不称打准无政!</h1>
        <p>得研河金起里美希孩有人裡人。料低不。</p>
        <button>处拉</button>
    </article>
</body>

那你的 CSS 就还要再加上:

#example-1 {
    width: 100vw;
}

#example-2 {
    width: 100vw;
}

总结

综上所述,如果你想让三大浏览器的滚动条都隐藏,并且可以捲动,那你的CSS就至少要长这样:

html {
    overflow: -moz-hidden-unscrollable;
    height: 100%;
}

body::-webkit-scrollbar {
    display: none;
}

body {
    -ms-overflow-style: none;
    height: 100%;
    width: calc(100vw + 18px);
    overflow: auto;
}

至于 width: 100vw; 要加在何处,就要看你的HTML结构长怎样了。

优点

可以让读者更聚焦于内文,而不会看到滚动条很短就懒得看、跳出网页,或一心急,就把滚动条直接往下拉。换言之,就是强迫读者慢慢地把内容看完。

缺点

假如读者想往回看,可能就会要滚很久。所以,如果你想为较长的内文隐藏滚动条,建议应有导览列,让读者可以快速跳转到某处。

以上是关于hutoolpost调用body参数有多层次的主要内容,如果未能解决你的问题,请参考以下文章

Python requests.post嵌套多层json参数调用接口

关于Oracle游标out参数多层调用的BUG,ORA-06504

skill pcell如何设置layer层次

友盟ios推送时怎么设置body参数

post,参数放在ulr和放在body的区别

后羿框架-公共子框架-报文封装