精华内容
下载资源
问答
  • 有时候在一个宽高固定的容器中,需要加载“更多内容”,如果设置了overflow:auto,加载更多内容时,子元素的大小超过父容器,就会出现滚动条。而滚动条的突然出现,会让子元素统统“向左抖了一下”。效果如下:   ...

      有时候在一个宽高固定的容器中,需要加载“更多内容”,如果设置了overflow:auto,加载更多内容时,子元素的大小超过父容器,就会出现滚动条。而滚动条的突然出现,会让子元素统统“向左抖了一下”。效果如下:

      

      先来复习一下overflow的几个概念:

          overflow:visible    //默认属性,内容超出显示

       overflow:auto   //内容不超出时无滚动条,内容超出时才显示滚动条

       overflow:hidden    //内容超出隐藏

       overflow:scroll   //不管内容超不超出,滚动条常驻

      在这里,我的内容定位方式为:margin: 0 auto,这是因为滚动条出现后挤占了一部分位置,此时内容是在除了滚动条的绿色区域居中的,但相对于红色边框的父容器中,是稍稍偏左的。如下:

      

      特别注意一个问题:假如内容的宽度是用百分比来写的,那么计算时是不包括父容器的滚动条的。举个栗子,父容器在这里宽度为400px,内容宽度假如为80%,在没有滚动条时,内容宽度是320px。有滚动条时,内容则变成了(400px - 滚动条宽度)* 80%,也就是说,内容宽度此时要稍稍小于320px。

     

      解决方案一:滚动条常驻(不完美但也还行)

      滚动条常驻,或者滚动条消失,都是为了避免“滚动条从无到有”这个突发过程。当然,一般是不会让滚动条消失的,因为很容易会让用户以为没有“更多内容”或者“内容到此为止了”,这个现象是不太合理的。让滚动条常驻呢?不完美,但也可以接受。

      设置父容器overflow-y:scroll,效果如下:

      

      解决方案二:写死容器及子元素的宽高定位(特别注意小屏设备)

      既然用百分比来写宽高,用auto来定位都会受到滚动条的影响,那么为了不受其影响,把所有东西都写死不就行了,举个栗子,现在容器400px,内容320px,那么易得左边距为(400px - 320px)/2。

      

      内容部分的css代码如下:

      

      最终效果如下:

      

      可以看到已经是达到要求了,内容本身没有左移。但是注意这里的父容器是写定宽高的,在大屏电脑或者小屏笔记本宽度都是400px,如果父容器宽高又要随着屏幕不同而动态改变,那这个margin-left就没法定位到容器正中间了,除非先写定宽高再做缩放。

    转载于:https://www.cnblogs.com/zhangnan35/p/10730617.html

    展开全文
  • 平时我们看一些网页刚开始加载的时候没有多少内容,页面也没有出现纵向滚动条,当我们点击加载更多,页面内容高度超过一屏于是出现滚动条,这个时候,页面会向左横向移动一段距离,正好是滚动条的宽度,这是因为滚动...

    平时我们看一些网页刚开始加载的时候没有多少内容,页面也没有出现纵向滚动条,当我们点击加载更多,页面内容高度超过一屏于是出现滚动条,这个时候,页面会向左横向移动一段距离,正好是滚动条的宽度,这是因为滚动条的出现占据了原本属于内容显示区的空间,自然内容就会被挤到左边去,毕竟这是一个很不好的体验,那么有什么好的解决方案呢?
    这里我们可以借助css3 的语法:
    calc(): 用于计算,IE9+浏览器支持该属性。
    vw:浏览器窗口宽度的相对单位,这个宽度是包含滚动条的
    100%:这个宽度是页面内容去容器的宽度,不包括滚动条
    于是:

    .wrap-outer{
        margin-leftcalc(100vw - 100%)
    }

    可以自行测试

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <style>
    .wrap-outer{
        margin-left:calc(100vw - 100%)
    }
    </style>
    <body>
        <button id='btn'>改变高度</button>
        <div class='wrap-outer' >
         <div id='box' style="width:900px;margin:0 auto;height:500px;background: #999"></div> 
        </div>
    
    
    </body>
    <script>
        let len = true
        document.getElementById('btn').onclick = function() {
            if(len) {
               document.getElementById('box').style.height = '2000px' 
               len = !len
            } else {
               document.getElementById('box').style.height = '500px' 
               len = !len
            }
    
        }
    </script>
    </html>

    升级版稳定方案

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <style>
        html {
          overflow-y: scroll;
        }
    
        :root {
          overflow-y: auto;
          overflow-x: hidden;
        }
    
        :root body {
          position: absolute;
        }
    
        body {
          width: 100vw;
          overflow: hidden;
        }
    </style>
    <body>
        <button id='btn'>改变高度</button>
        <div class='wrap' >
         <div id='box' style="width:900px;margin:0 auto;height:500px;background: #999"></div> 
        </div>
    
    
    </body>
    <script>
        let len = true
        document.getElementById('btn').onclick = function() {
            if(len) {
               document.getElementById('box').style.height = '2000px' 
               len = !len
            } else {
               document.getElementById('box').style.height = '500px' 
               len = !len
            }
    
        }
    </script>
    </html>
    展开全文
  • 瀑布流是一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动滚动,这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest,逐渐在国内流行开来。国内大多数清新站基本为...
  • Android开源音乐播放器之在线音乐列表自动加载更多 前言 上一节我们仿照云音乐实现了黑胶唱片专辑封面,这节我们该实现歌词显示了。当然,歌词不仅仅是显示就完了,作为一个有素质的音乐播放器,我们当然还需要根据...
  • 超实用的jQuery代码段

    2019-03-04 10:20:41
    10.24 在列表框中实现加载更多效果 10.25 自定义选择菜单 10.26 使用多个选择菜单进行组合选择 10.27 使用多选菜单选择多个值 10.28 创建双重范围的滑块 10.29 实现开关效果的选择功能 10.30 创建主题化的表单效果 ...
  • 只需滚动查看更多。 错误或建议?使用“详细信息”选项卡上的“发送反馈”按钮。 1.4.9新增 ★收到反馈什么这个扩展是很难使用的!添加了为新安装显示的帮助页面。 1.4.8新增 :umbrella:修正链接到tumblr帐户的...
  • Studier-crx插件

    2021-03-30 01:01:54
    要在学习平台中添加更多插槽,请按“添加学习项目”。 要删除研究项目,请从问题和答案中删除文本,然后在下一页重新加载时将其删除。 步骤2)以分钟和秒为单位设置所需的学习间隔。 不用担心,如果您最终想要一个...
  • DiskGenius4.5.0免费版

    2014-04-04 16:12:02
    4、专业版增加更多音视频文件格式的预览支持。 5、支持用只读方式加载Hyper-V VHDX格式虚拟硬盘。 6、在额外扫描已知文件类型恢复时,增加下列类型:3g2, m4v, mmf, X3F, M4R, AIF, MKV, MTS, WRF, WMF, VFB, VNT, ...
  • 4、专业版增加更多音视频文件格式的预览支持。 5、支持用只读方式加载Hyper-V VHDX格式虚拟硬盘。 6、在额外扫描已知文件类型恢复时,增加下列类型:3g2, m4v, mmf, X3F, M4R, AIF, MKV, MTS, WRF, WMF, VFB, VNT...
  • JavaScript网页特效范例宝典源码

    千次下载 热门讨论 2013-09-04 10:40:38
    实例282 文字从右向左依次弹出 443 实例283 文字从中间向两边展开 445 实例284 文字跑马灯特效 447 实例285 文字依次显示后快速收缩 449 实例286 文字的展开与收缩 451 实例287 状态栏中的文字依次弹出 452 10.2 ...
  • 实例024 精确地使用浮点数 实例025 不用乘法运算符实现2×16 实例026 实现两个变量的互换(不借助第3个变量) 2.3 条件语句 实例027 判断某一年是否为闰年 实例028 验证登录信息的合法性 实例029 为新员工...
  • 实例024 精确地使用浮点数 实例025 不用乘法运算符实现2×16 实例026 实现两个变量的互换(不借助第3个变量) 2.3 条件语句 实例027 判断某一年是否为闰年 实例028 验证登录信息的合法性 实例029 为新员工...
  • 手机 pdf 阅读器

    2009-02-12 23:00:29
    改进的输入框模式,以使得能适应更多的手机如天语等 [2008.10.21] Ver 3.2.23 为了提高运行效率,以下功能在LITE上将被取消(自定义欢迎页问候语;欢迎页背景图) 取消了JAR的支持,提高运行效率 修正打开大ZIP文件...
  • 阅读工具 开卷有益

    2012-03-31 14:07:03
    修改:窗口动画为从右到,更加直观 2. 修改:从外部点击CHM启动开卷出错的Bug 3. 修改:M8版本注册、反注册提示对话框不正确的Bug 4. 修改:字色、背景色、字体选择对话框,按上方向键标题栏消失的Bug 5. ...
  • flashmtv的制作

    2011-11-17 18:15:11
    附件一【库面板中歌词元件的整理】:用辅助软件做出的歌词,每句歌词都会有好几个元件,一首歌歌词添加完,元件有很多,这样库显得很凌乱,如果再加上图片转换的元件就更多了,为了能让库中的元件一目了然,可以建立...
  • -修正RELEASE版本下语言加载的BUG(feedback:yigehaoren)。 -增加pt_BR语言,由Ujvari提供。 +为所有Panel(包括Grid,Tree,Form等)增加枚举类型Icon,其中包含1700个小图标。 -如果Panel具有IconUrl属性,...
  • 有些软件在安装后,并没有提供卸载程序,即使在控制面板中将其删除,仍然会有残余的线程文件外发送信息,用户通常只能采用手工的办法去删除,这样操作起来不但麻烦,而且还容易误删系统文件。以下是一些卸载顽固...
  • ExtAspNet_v2.3.2_dll

    2010-09-29 14:37:08
    -修正RELEASE版本下语言加载的BUG(feedback:yigehaoren)。 -增加pt_BR语言,由Ujvari提供。 +为所有Panel(包括Grid,Tree,Form等)增加枚举类型Icon,其中包含1700个小图标。 -如果Panel具有IconUrl属性,...
  • 实例016 加载和使用API阅览器 实例017 定制模板库 1.4 趣味程序 实例018 神秘的心理测试 第2章 语言基础 2.1 变量和常量 实例019 局部变量制作计数器 实例020 使用公用变量记录当前登录用户 实例021 使用...
  • 实例016 加载和使用API阅览器 实例017 定制模板库 1.4 趣味程序 实例018 神秘的心理测试 第2章 语言基础 2.1 变量和常量 实例019 局部变量制作计数器 实例020 使用公用变量记录当前登录用户 实例021 使用...
  • 功能上类似于大名鼎鼎的 Octotree ,但是用了现代化的前端工具,性能好很。 GITHUBER zhuowenli Github仓库地址 这是一个帮助 GitHub 开发者每日发现优质内容的 Chrome 主页拓展。 内容同步更新到公众号...
  •  创建压缩的数据文件以压缩方式存储数据文件,可以减小文件大小,但需要花费更多的时间加载和保存项目。  创建可独立运行的执行文件保存项目时附加菜单数据即 autorun.apm 文件的内容到 autorun.exe 文件中。激活...

空空如也

空空如也

1 2 3
收藏数 53
精华内容 21
关键字:

向左滚动加载更多