CSS中＂overflow＂属性的可能值有哪些？

CSS中的`overflow`属性用于设置当元素的内容太大而无法适应其块级容器时如何处理。它通常应用于块级元素或替换元素（如``或``）。`overflow`属性有以下几个常用的属性值：</p> </p> <p>1. <strong>visible</strong>：这是默认值。当内容超出元素框时，它会简单地溢出，并在页面上显示。此值不会裁剪内容，也不会提供滚动条。</p> </p> <pre><code class="language-css">.element { <p style="text-align:center"><img decoding="async" src="http://weicankao.com/wp-content/uploads/2024/05/U8H08.jpg" alt="CSS中＂overflow＂属性的可能值有哪些？" title="CSS中＂overflow＂属性的可能值有哪些？"><br /></p>overflow: visible; } </code></pre> </p> <p>2. <strong>hidden</strong>：当内容超出元素框时，溢出的内容会被剪裁，并且不会在页面上显示。此外，也不会提供滚动条。</p> </p> <pre><code class="language-css">.element { overflow: hidden; } </code></pre> </p> <p>3. <strong>scroll</strong>：无论内容是否真的溢出，始终会为元素提供滚动条。这意味着即使内容可以适应其容器，滚动条也会出现。</p> </p> <pre><code class="language-css">.element { overflow: scroll; } </code></pre> </p> <p>4. <strong>auto</strong>：此值表示只有在内容确实溢出时，才会显示滚动条。如果内容适合其容器，则不会出现滚动条。</p> </p> <pre><code class="language-css">.element { overflow: auto; } </code></pre> </p> <p>5. <strong>inherit</strong>：这个值会让元素继承其父元素的`overflow`属性值。</p> </p> <pre><code class="language-css">.element { overflow: inherit; } </code></pre> </p> <p>除了这些标准属性值之外，`overflow`属性还有两个与方向有关的速记属性值：</p> </p> <p>1. <strong>overflow-x</strong>：这个属性用来设置元素水平方向的溢出处理方式。</p> </p> <pre><code class="language-css">.element { overflow-x: auto; } </code></pre> </p> <p>2. <strong>overflow-y</strong>：这个属性用来设置元素垂直方向的溢出处理方式。</p> </p> <pre><code class="language-css">.element { overflow-y: scroll; } </code></pre> </p> <p>这两个速记属性允许您分别为水平和垂直方向设置不同的溢出行为。</p> </p> <p>了解并熟练运用`overflow`属性的不同值，可以帮助前端开发者更好地控制页面元素的布局，提升用户体验。在实现复杂的布局和交互时，合理利用`overflow`属性可以防止内容溢出影响页面美观和可用性。</p> </div> <div class="single-credit"> 本文来自网络，不代表微参考立场，转载请注明出处：<a href="http://www.weicankao.com/css/1433.html"">http://www.weicankao.com/css/1433.html</a> </div> <div class="entry-footer clear"> <div class="entry-footer-right"> </div> </div> <div class="entry-bottom clear"> <div class="entry-tags"> <span class="tag-links"><span>标签:</span><a href="http://www.weicankao.com/tag/%e5%b1%9e%e6%80%a7" rel="tag">属性</a></span> </div> <span class="custom-share"> <span class="social-share" data-sites="wechat, weibo, qq, qzone"></span> </span> </div> </article> <div class="post-nav clear"> <div class="post-nav-previous"><i class="fa fa-angle-left"></i> 上一篇<a href="http://www.weicankao.com/css/1435.html" rel="next">CSS中的弹性布局（Flexbox）介绍</a></div> <div class="post-nav-next">下一篇 <i class="fa fa-angle-right"></i><a href="http://www.weicankao.com/css/1431.html" rel="prev">如何使用CSS使图片根据div尺寸自动调整大小</a></div> </div> <div class="related-content"> <h3 class="section-title">相关推荐</h3> <ul class="clear"> <li class="hentry"> <span class="entry-title"><a href="http://www.weicankao.com/css/3394.html">CSS3: 前端设计的新纪元带来了哪些创新？</a></span> <span class="entry-meta"> <span class="entry-views"><i class="flaticon-eye"></i> 29<em>阅读</em></span> </span> </li> <li class="hentry"> <span class="entry-title"><a href="http://www.weicankao.com/css/3391.html">如何运用CSS梯度生成器创建多彩背景效果？</a></span> <span class="entry-meta"> <span class="entry-views"><i class="flaticon-eye"></i> 39<em>阅读</em></span> </span> </li> <li class="hentry"> <span class="entry-title"><a href="http://www.weicankao.com/css/3386.html">如何在CSS3中实现背景模糊效果？</a></span> <span class="entry-meta"> <span class="entry-views"><i class="flaticon-eye"></i> 37<em>阅读</em></span> </span> </li> <li class="hentry"> <span class="entry-title"><a href="http://www.weicankao.com/css/3385.html">火狐浏览器是如何处理CSS样式的？</a></span> <span class="entry-meta"> <span class="entry-views"><i class="flaticon-eye"></i> 15<em>阅读</em></span> </span> </li> <li class="hentry"> <span class="entry-title"><a href="http://www.weicankao.com/css/3383.html">如何有效运用CSS进行网页布局设计？</a></span> <span class="entry-meta"> <span class="entry-views"><i class="flaticon-eye"></i> 18<em>阅读</em></span> </span> </li> <li class="hentry"> <span class="entry-title"><a href="http://www.weicankao.com/css/3382.html">如何使用CSS3实现按钮发光效果？</a></span> <span class="entry-meta"> <span class="entry-views"><i class="flaticon-eye"></i> 18<em>阅读</em></span> </span> </li> </ul> </div> </main> </div> </div> <aside id="secondary" class="widget-area sidebar"> <div class="sidebar__inner"> <div id="search-3" class="widget widget_search"><form id="searchform" method="get" action="http://www.weicankao.com/"> <input type="search" name="s" class="search-input" placeholder="请输入关键词" autocomplete="off"> <button type="submit" class="search-submit">搜索</button> </form></div><div id="iux-recent-3" class="widget widget-iux-recent widget_posts_thumbnail"><h2 class="widget-title">近期文章</h2><ul><li class="clear"><a target="_blank" class="thumbnail-link" href="http://www.weicankao.com/vue/3395.html"><div class="thumbnail-wrap"><img src="http://www.weicankao.com/wp-content/themes/iux/thumb.php?src=/wp-content/uploads/2024/05//085d2a44-08.jpg&w=150&h=90" alt="如何以慢动作播放安卓上的Vue动画效果？"/></div></a><div class="entry-wrap"><a href="http://www.weicankao.com/vue/3395.html" rel="bookmark">如何以慢动作播放安卓上的Vue动画效果？</a><div class="entry-meta">2024年 8月 19日</div></div></li><li class="clear"><a target="_blank" class="thumbnail-link" href="http://www.weicankao.com/css/3394.html"><div class="thumbnail-wrap"><img src="http://www.weicankao.com/wp-content/themes/iux/thumb.php?src=/wp-content/uploads/2024/05//dfba98fc-08.jpg&w=150&h=90" alt="CSS3: 前端设计的新纪元带来了哪些创新？"/></div></a><div class="entry-wrap"><a href="http://www.weicankao.com/css/3394.html" rel="bookmark">CSS3: 前端设计的新纪元带来了哪些创新？</a><div class="entry-meta">2024年 8月 19日</div></div></li><li class="clear"><a target="_blank" class="thumbnail-link" href="http://www.weicankao.com/qianduan/3393.html"><div class="thumbnail-wrap"><img src="http://www.weicankao.com/wp-content/themes/iux/thumb.php?src=/wp-content/uploads/2024/05//e77147dd-08.jpg&w=150&h=90" alt="ECS在前端技术领域中扮演着怎样的角色？"/></div></a><div class="entry-wrap"><a href="http://www.weicankao.com/qianduan/3393.html" rel="bookmark">ECS在前端技术领域中扮演着怎样的角色？</a><div class="entry-meta">2024年 8月 19日</div></div></li><li class="clear"><a target="_blank" class="thumbnail-link" href="http://www.weicankao.com/qianduan/3392.html"><div class="thumbnail-wrap"><img src="http://www.weicankao.com/wp-content/themes/iux/thumb.php?src=/wp-content/uploads/2024/05//39b7d544-08.jpg&w=150&h=90" alt="空格在前端设计中代表什么符号？"/></div></a><div class="entry-wrap"><a href="http://www.weicankao.com/qianduan/3392.html" rel="bookmark">空格在前端设计中代表什么符号？</a><div class="entry-meta">2024年 8月 19日</div></div></li><li class="clear"><a target="_blank" class="thumbnail-link" href="http://www.weicankao.com/css/3391.html"><div class="thumbnail-wrap"><img src="http://www.weicankao.com/wp-content/themes/iux/thumb.php?src=/wp-content/uploads/2024/05//6962d7fb-08.jpg&w=150&h=90" alt="如何运用CSS梯度生成器创建多彩背景效果？"/></div></a><div class="entry-wrap"><a href="http://www.weicankao.com/css/3391.html" rel="bookmark">如何运用CSS梯度生成器创建多彩背景效果？</a><div class="entry-meta">2024年 8月 19日</div></div></li></ul></div><div id="media_image-3" class="widget widget_media_image"><img width="300" height="300" src="http://www.weicankao.com/wp-content/uploads/2024/05/1-300x300.png" class="image wp-image-125 attachment-medium size-medium" alt="" style="max-width: 100%; height: auto;" decoding="async" srcset="http://www.weicankao.com/wp-content/uploads/2024/05/1-300x300.png 300w, http://www.weicankao.com/wp-content/uploads/2024/05/1-150x150.png 150w, http://www.weicankao.com/wp-content/uploads/2024/05/1-768x768.png 768w, http://www.weicankao.com/wp-content/uploads/2024/05/1.png 1000w" sizes="(max-width: 300px) 100vw, 300px" loading="eager" /></div><div id="iux-views-3" class="widget widget-iux-views widget_posts_thumbnail"><h2 class="widget-title">浏览最多的文章</h2><ul><li class="clear"><a target="_blank" class="thumbnail-link" href="http://www.weicankao.com/css/1729.html"><div class="thumbnail-wrap"><img src="http://www.weicankao.com/wp-content/themes/iux/thumb.php?src=http://weicankao.com/wp-content/uploads/2024/05/Z68gk0aTi4.jpg&w=150&h=90" alt="如何处理CSS下拉菜单被遮挡的问题"/></div></a><div class="entry-wrap"><a href="http://www.weicankao.com/css/1729.html" rel="bookmark">如何处理CSS下拉菜单被遮挡的问题</a><div class="entry-meta">2024年 5月 29日</div></div></li><li class="clear"><a href="http://www.weicankao.com/css/30.html" rel="bookmark"><div class="thumbnail-wrap"><img width="150" height="90" src="http://www.weicankao.com/wp-content/uploads/2024/05/qROfSNf8dp-150x90.jpg" class="attachment-iux_widget_thumb size-iux_widget_thumb wp-post-image" decoding="async" loading="eager" title="如何运用CSS提升网页视觉效果缩略图" alt="如何运用CSS提升网页视觉效果缩略图" /></div></a><div class="entry-wrap"><a href="http://www.weicankao.com/css/30.html" rel="bookmark">如何运用CSS提升网页视觉效果</a><div class="entry-meta">2024年 5月 29日</div></div></li><li class="clear"><a target="_blank" class="thumbnail-link" href="http://www.weicankao.com/vue/245.html"><div class="thumbnail-wrap"><img src="http://www.weicankao.com/wp-content/themes/iux/thumb.php?src=http://weicankao.com/wp-content/uploads/2024/05/5wQI4KFnj7.jpg&w=150&h=90" alt="如何清除Vue路由的缓存"/></div></a><div class="entry-wrap"><a href="http://www.weicankao.com/vue/245.html" rel="bookmark">如何清除Vue路由的缓存</a><div class="entry-meta">2024年 5月 29日</div></div></li><li class="clear"><a target="_blank" class="thumbnail-link" href="http://www.weicankao.com/vue/3030.html"><div class="thumbnail-wrap"><img src="http://www.weicankao.com/wp-content/themes/iux/thumb.php?src=/wp-content/uploads/2024/05//a5fdd251-07.jpg&w=150&h=90" alt="如何设计Vue页面以支持多模板架构？"/></div></a><div class="entry-wrap"><a href="http://www.weicankao.com/vue/3030.html" rel="bookmark">如何设计Vue页面以支持多模板架构？</a><div class="entry-meta">2024年 7月 23日</div></div></li><li class="clear"><a target="_blank" class="thumbnail-link" href="http://www.weicankao.com/qianduan/3360.html"><div class="thumbnail-wrap"><img src="http://www.weicankao.com/wp-content/themes/iux/thumb.php?src=/wp-content/uploads/2024/05//19ea8d06-08.jpg&w=150&h=90" alt="在前端开发中，ECS代表了什么？"/></div></a><div class="entry-wrap"><a href="http://www.weicankao.com/qianduan/3360.html" rel="bookmark">在前端开发中，ECS代表了什么？</a><div class="entry-meta">2024年 8月 9日</div></div></li></ul></div><div id="iux-random-3" class="widget widget-iux-random widget_posts_thumbnail"><h2 class="widget-title">随机文章</h2><ul><li class="clear"><a target="_blank" class="thumbnail-link" href="http://www.weicankao.com/vue/2538.html"><div class="thumbnail-wrap"><img src="http://www.weicankao.com/wp-content/themes/iux/thumb.php?src=/wp-content/uploads/2024/05//e43b75a6-07.jpg&w=150&h=90" alt="如何理解Vue Router的作用与原理？"/></div></a><div class="entry-wrap"><a href="http://www.weicankao.com/vue/2538.html" rel="bookmark">如何理解Vue Router的作用与原理？</a><div class="entry-meta">2024年 7月 10日</div></div></li><li class="clear"><a target="_blank" class="thumbnail-link" href="http://www.weicankao.com/uncategorized/1201.html"><div class="thumbnail-wrap"><img src="http://www.weicankao.com/wp-content/themes/iux/thumb.php?src=http://weicankao.com/wp-content/uploads/2024/05/X0ea4w2.jpg&w=150&h=90" alt="如何在HTML中嵌入并使用JavaScript代码"/></div></a><div class="entry-wrap"><a href="http://www.weicankao.com/uncategorized/1201.html" rel="bookmark">如何在HTML中嵌入并使用JavaScript代码</a><div class="entry-meta">2024年 5月 29日</div></div></li><li class="clear"><a target="_blank" class="thumbnail-link" href="http://www.weicankao.com/vue/2790.html"><div class="thumbnail-wrap"><img src="http://www.weicankao.com/wp-content/themes/iux/thumb.php?src=/wp-content/uploads/2024/05//e3aef9f1-07.jpg&w=150&h=90" alt="如何有效避免和解决Vue中的内存泄漏问题？"/></div></a><div class="entry-wrap"><a href="http://www.weicankao.com/vue/2790.html" rel="bookmark">如何有效避免和解决Vue中的内存泄漏问题？</a><div class="entry-meta">2024年 7月 17日</div></div></li><li class="clear"><a href="http://www.weicankao.com/qianduan/2244.html" rel="bookmark"><div class="thumbnail-wrap"><img width="150" height="90" src="http://www.weicankao.com/wp-content/uploads/2024/06/8L712-150x90.jpg" class="attachment-iux_widget_thumb size-iux_widget_thumb wp-post-image" decoding="async" loading="eager" title="如何使用Node.js编写接口缩略图" alt="如何使用Node.js编写接口缩略图" /></div></a><div class="entry-wrap"><a href="http://www.weicankao.com/qianduan/2244.html" rel="bookmark">如何使用Node.js编写接口</a><div class="entry-meta">2024年 6月 24日</div></div></li><li class="clear"><a target="_blank" class="thumbnail-link" href="http://www.weicankao.com/css/1639.html"><div class="thumbnail-wrap"><img src="http://www.weicankao.com/wp-content/themes/iux/thumb.php?src=http://weicankao.com/wp-content/uploads/2024/05/Tz2PdB.jpg&w=150&h=90" alt="如何实现CSS过渡效果"/></div></a><div class="entry-wrap"><a href="http://www.weicankao.com/css/1639.html" rel="bookmark">如何实现CSS过渡效果</a><div class="entry-meta">2024年 5月 29日</div></div></li></ul></div><div id="tag_cloud-3" class="widget widget_tag_cloud"><h2 class="widget-title">标签</h2><div class="tagcloud"><a href="http://www.weicankao.com/tag/div" class="tag-cloud-link tag-link-27 tag-link-position-1" style="font-size: 11.5pt;" aria-label="div (7 项)">div</a> <a href="http://www.weicankao.com/tag/%e4%bc%aa%e7%b1%bb" class="tag-cloud-link tag-link-35 tag-link-position-2" style="font-size: 11.5pt;" aria-label="伪类 (7 项)">伪类</a> <a href="http://www.weicankao.com/tag/%e5%87%bd%e6%95%b0" class="tag-cloud-link tag-link-7 tag-link-position-3" style="font-size: 21.066666666667pt;" aria-label="函数 (52 项)">函数</a> <a href="http://www.weicankao.com/tag/%e5%8f%82%e6%95%b0" class="tag-cloud-link tag-link-18 tag-link-position-4" style="font-size: 14.766666666667pt;" aria-label="参数 (14 项)">参数</a> <a href="http://www.weicankao.com/tag/%e5%90%ab%e4%b9%89" class="tag-cloud-link tag-link-30 tag-link-position-5" style="font-size: 13.6pt;" aria-label="含义 (11 项)">含义</a> <a href="http://www.weicankao.com/tag/%e5%ae%9a%e4%b9%89" class="tag-cloud-link tag-link-24 tag-link-position-6" style="font-size: 18.383333333333pt;" aria-label="定义 (30 项)">定义</a> <a href="http://www.weicankao.com/tag/%e5%af%b9%e9%bd%90" class="tag-cloud-link tag-link-33 tag-link-position-7" style="font-size: 8pt;" aria-label="对齐 (3 项)">对齐</a> <a href="http://www.weicankao.com/tag/%e5%b1%85%e4%b8%ad" class="tag-cloud-link tag-link-10 tag-link-position-8" style="font-size: 14.416666666667pt;" aria-label="居中 (13 项)">居中</a> <a href="http://www.weicankao.com/tag/%e5%b1%9e%e6%80%a7" class="tag-cloud-link tag-link-15 tag-link-position-9" style="font-size: 22pt;" aria-label="属性 (62 项)">属性</a> <a href="http://www.weicankao.com/tag/%e5%b5%8c%e5%85%a5" class="tag-cloud-link tag-link-9 tag-link-position-10" style="font-size: 10.916666666667pt;" aria-label="嵌入 (6 项)">嵌入</a> <a href="http://www.weicankao.com/tag/%e5%ba%94%e7%94%a8" class="tag-cloud-link tag-link-23 tag-link-position-11" style="font-size: 18.733333333333pt;" aria-label="应用 (32 项)">应用</a> <a href="http://www.weicankao.com/tag/%e5%be%aa%e7%8e%af" class="tag-cloud-link tag-link-17 tag-link-position-12" style="font-size: 13.6pt;" aria-label="循环 (11 项)">循环</a> <a href="http://www.weicankao.com/tag/%e6%8f%92%e5%85%a5" class="tag-cloud-link tag-link-25 tag-link-position-13" style="font-size: 11.5pt;" aria-label="插入 (7 项)">插入</a> <a href="http://www.weicankao.com/tag/%e6%95%88%e6%9e%9c" class="tag-cloud-link tag-link-13 tag-link-position-14" style="font-size: 15pt;" aria-label="效果 (15 项)">效果</a> <a href="http://www.weicankao.com/tag/%e6%96%87%e5%ad%97" class="tag-cloud-link tag-link-29 tag-link-position-15" style="font-size: 9.1666666666667pt;" aria-label="文字 (4 项)">文字</a> <a href="http://www.weicankao.com/tag/%e6%96%87%e6%9c%ac" class="tag-cloud-link tag-link-20 tag-link-position-16" style="font-size: 13.95pt;" aria-label="文本 (12 项)">文本</a> <a href="http://www.weicankao.com/tag/%e6%a0%87%e7%ad%be" class="tag-cloud-link tag-link-16 tag-link-position-17" style="font-size: 20.95pt;" aria-label="标签 (50 项)">标签</a> <a href="http://www.weicankao.com/tag/%e6%a0%b7%e5%bc%8f" class="tag-cloud-link tag-link-11 tag-link-position-18" style="font-size: 18.966666666667pt;" aria-label="样式 (34 项)">样式</a> <a href="http://www.weicankao.com/tag/%e6%a1%86%e6%9e%b6" class="tag-cloud-link tag-link-22 tag-link-position-19" style="font-size: 18.616666666667pt;" aria-label="框架 (31 项)">框架</a> <a href="http://www.weicankao.com/tag/%e6%b3%a8%e9%87%8a" class="tag-cloud-link tag-link-8 tag-link-position-20" style="font-size: 13.95pt;" aria-label="注释 (12 项)">注释</a> <a href="http://www.weicankao.com/tag/%e6%b5%ae%e5%8a%a8" class="tag-cloud-link tag-link-38 tag-link-position-21" style="font-size: 8pt;" aria-label="浮动 (3 项)">浮动</a> <a href="http://www.weicankao.com/tag/%e6%bb%9a%e5%8a%a8" class="tag-cloud-link tag-link-12 tag-link-position-22" style="font-size: 12.083333333333pt;" aria-label="滚动 (8 项)">滚动</a> <a href="http://www.weicankao.com/tag/%e7%bd%91%e9%a1%b5" class="tag-cloud-link tag-link-14 tag-link-position-23" style="font-size: 12.666666666667pt;" aria-label="网页 (9 项)">网页</a> <a href="http://www.weicankao.com/tag/%e8%8f%9c%e5%8d%95" class="tag-cloud-link tag-link-19 tag-link-position-24" style="font-size: 14.416666666667pt;" aria-label="菜单 (13 项)">菜单</a> <a href="http://www.weicankao.com/tag/%e8%a7%84%e5%88%99" class="tag-cloud-link tag-link-39 tag-link-position-25" style="font-size: 9.1666666666667pt;" aria-label="规则 (4 项)">规则</a> <a href="http://www.weicankao.com/tag/%e8%a7%a3%e6%9e%90" class="tag-cloud-link tag-link-28 tag-link-position-26" style="font-size: 15pt;" aria-label="解析 (15 项)">解析</a> <a href="http://www.weicankao.com/tag/%e8%be%b9%e8%b7%9d" class="tag-cloud-link tag-link-37 tag-link-position-27" style="font-size: 10.916666666667pt;" aria-label="边距 (6 项)">边距</a> <a href="http://www.weicankao.com/tag/%e9%94%9a%e7%82%b9" class="tag-cloud-link tag-link-21 tag-link-position-28" style="font-size: 8pt;" aria-label="锚点 (3 项)">锚点</a> <a href="http://www.weicankao.com/tag/%e9%97%b4%e8%b7%9d" class="tag-cloud-link tag-link-31 tag-link-position-29" style="font-size: 11.5pt;" aria-label="间距 (7 项)">间距</a> <a href="http://www.weicankao.com/tag/%e9%9a%90%e8%97%8f" class="tag-cloud-link tag-link-26 tag-link-position-30" style="font-size: 11.5pt;" aria-label="隐藏 (7 项)">隐藏</a></div> </div> </div> </aside> </div> <footer id="colophon" class="site-footer clear"> <div class="clear"></div> <div id="site-bottom" class="clear"> <div class="container"> <div class="menu-primary-container"><ul id="footer-menu" class="footer-nav"><li class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-7"><a href="http://www.weicankao.com/./css">css</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-9"><a href="http://www.weicankao.com/./js">js</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-10"><a href="http://www.weicankao.com/./vue">vue</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2153"><a href="http://www.weicankao.com/./qianduan">前端问答</a></li> </ul></div> <div class="site-info"> © 2024 <a href="http://weicankao.com">微参考</a> </div> </div> </div>  </footer> </div> <div class="bottom-right"> <div id="back-top" class="bottom-icon"> <a href="#top" title="返回顶部"> <span class="icon"><i class="fa fa-chevron-up"></i></span> <span class="text">返回顶部</span> </a> </div> </div> <script type="text/javascript" src="http://www.weicankao.com/wp-content/themes/iux/assets/js/superfish.js?ver=6.6.2" id="superfish-js"></script> <script type="text/javascript" src="http://www.weicankao.com/wp-content/themes/iux/assets/js/jquery.slicknav.js?ver=6.6.2" id="slicknav-js"></script> <script type="text/javascript" src="http://www.weicankao.com/wp-content/themes/iux/assets/js/modernizr.js?ver=6.6.2" id="modernizr-js"></script> <script type="text/javascript" src="http://www.weicankao.com/wp-content/themes/iux/assets/js/html5.js?ver=6.6.2" id="html5-js"></script> <script type="text/javascript" src="http://www.weicankao.com/wp-content/themes/iux/assets/js/jquery.bxslider.js?ver=6.6.2" id="bxslider-js"></script> <script type="text/javascript" src="http://www.weicankao.com/wp-content/themes/iux/assets/js/index.js?ver=20200320" id="index-js"></script> <script type="text/javascript" src="http://www.weicankao.com/wp-content/themes/iux/assets/js/qrcode.js?ver=6.6.2" id="qrcode-js"></script> <script type="text/javascript" src="http://www.weicankao.com/wp-content/themes/iux/assets/js/social-share.js?ver=6.6.2" id="social-share-js"></script> <script type="text/javascript" src="http://www.weicankao.com/wp-content/themes/iux/assets/js/jquery.custom.js?ver=20220101" id="iux-custom-js"></script> <script> /(trident|msie)/i.test(navigator.userAgent)&&document.getElementById&&window.addEventListener&&window.addEventListener("hashchange",function(){var t,e=location.hash.substring(1);/^[A-z0-9_-]+$/.test(e)&&(t=document.getElementById(e))&&(/^(?:a|select|input|button|textarea)$/i.test(t.tagName)||(t.tabIndex=-1),t.focus())},!1); </script> <script> (function($){ //create closure so we can safely use $ as alias for jQuery $(document).ready(function(){ "use strict"; /*-----------------------------------------------------------------------------------*/ /* Slick Mobile Menu /*-----------------------------------------------------------------------------------*/ $('#primary-menu').slicknav({ prependTo: '#slick-mobile-menu', allowParentLinks: true, label: '导航' }); }); })(jQuery); </script> <script src="http://www.weicankao.com/wp-content/themes/iux/assets/js/sticky-sidebar.min.js"></script> <script> (function($){ //create closure so we can safely use $ as alias for jQuery $(document).ready(function(){ "use strict"; $(window).load(function() { var stickySidebar = new StickySidebar('#secondary', { topSpacing: 20, bottomSpacing: 20, containerSelector: '.site_container', innerWrapperSelector: '.sidebar__inner' }); }); }); })(jQuery); </script> <script> (function($){ //create closure so we can safely use $ as alias for jQuery $(document).ready(function(){ "use strict"; if ($(window).width() >= 960) { var mn = $(".site-header"); var mns = "main-nav-scrolled"; var hdr = $('.top-bar').height(); $(window).scroll(function() { if( $(this).scrollTop() > hdr ) { mn.addClass(mns); $('.header-space').css('display','block'); } else { mn.removeClass(mns); $('.header-space').css('display','none'); } }); } }); })(jQuery); </script> </body> </html>