Write the Code. Change the World.

9月 04

很多框架,网站,实现的模态窗口体验不是那么完美。不过,知乎的模态窗口却是很完美的。比如登录。知乎的模态窗口实现了以下几点:

  1. 弹出模态窗口后。所有滚动条都隐藏(如果有的话),并且鼠标滑轮,无论怎么滚动,被半透明遮挡在下边的内容岿然不动。

  2. 弹出模态窗口后。窗口在水平和垂直方向是都是居中的。

  3. 关闭模态窗口后。滚动条功能恢复。

Demo: https://api.qiubg.com/demo/vnmodal

gitHub: https://github.com/vini123/vnmodal

要实现以上几点功能,通过js,css还是很容易的。先来实现模态窗口前后的变化。

弹出模态窗口前,判断在垂直方向上是否有滚动条。如果有滚动条,隐藏滚动条。并且将document的margin-right设置为17px

    .hideScroll{
        overflow:hidden;
        margin-right:17px;
    }

    if(hasScroll())
        $('html').addClass('hideScroll');

    function hasScroll()
    {
        if($("body").scrollTop()>0)
        return true;

        $("body").scrollTop(10);

        if($("body").scrollTop()>0)
        {
        $("body").scrollTop(0);
        return true;
        }
        return false;
}

同样,关闭窗口的时候。复位。

知乎滚动条小bug

对体验要求严格的话,这个算是一个bug。实现过程如下:

  1. 在知乎上找一个内容比较少的页面。找不到就自己创建一个提问,打开替换页面,有一个具体的url地址。然后退出登录,保证此时页面不存在纵向滚动。

  2. 第一步保证页面不存在纵向滚动条的前提下(如果你怎么弄都有滚动条,那就f12进入开发者模式,手动删除dom达到)。点击登录按钮,弹出登录框。

  3. 拖动窗口。将窗口的高度拖到更小,保证此时出现滚动条(只是存在登录框,你看不到),然后点击叉叉,关闭登录框。这个时候,你会发现滚动条出现了,网页的内容整体左移了。这个就是知乎滚动条小bug。

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注