HTML隐藏滚动条,还带着滚动效果

HTML隐藏滚动条,还带着滚动效果1 问题描述 见下图 在不出现滚动条的情况下 头部和内容区域宽度相等 但是内容区域的内容太多 必须得保留滚动效果 不出现滚动条 2 解决方法在内容区域外层套一个 div 设置 div 的 overflow hidden 样式 把内容区域的宽度设置为 100 20px

1、问题描述,见下图。

HTML隐藏滚动条,还带着滚动效果

       在不出现滚动条的情况下,头部和内容区域宽度相等,但是内容 区域的内容太多,必须得保留滚动效果,不出现滚动条。

2、解决方法

    在内容区域外层套一个div,设置div的overflow:hidden样式,把内容区域的宽度设置为 “100% + 20px”;

 
  
头部

哈哈哈

哈哈哈

哈哈哈

哈哈哈

哈哈哈

哈哈哈

哈哈哈

哈哈哈

哈哈哈

哈哈哈

哈哈哈

哈哈哈

哈哈哈

哈哈哈

HTML隐藏滚动条,还带着滚动效果

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/211440.html原文链接:https://javaforall.net

(0)
上一篇 2026年3月18日 下午10:25
下一篇 2026年3月18日 下午10:26


相关推荐

  • 分布式锁的实现和应用场景_redis分布式锁释放锁

    分布式锁的实现和应用场景_redis分布式锁释放锁分布式锁为了解决分布式场景下全局加锁的问题。在单体项目中可以使用synchronize完成对于不同线程之间的资源争抢问题。但是在分布式场景下,synchronize只能对其中一个项目进行资源控制,进程之间的资源增强仍然无法解距。换言之,可以将分布式锁理解为对于整个分不是系统的synchronize。通常使用独立与线程之外的工具控制资源,如redis及框架redisson。1.传统单体架构业务流程synchronized(this){ /** 业务逻辑扣减库存 */}以上代码对于单体架构可

    2025年10月1日
    6
  • qml 结合 QSqlTableModel 动态加载数据 MVC「建议收藏」

    效果预览:一、准备好对应的 QSqlTableModel#ifndefLOCALMUSICMODEL_H#defineLOCALMUSICMODEL_H#include<QObject>#include<QSqlTableModel>#include<QMediaPlayer>#include"libzplay.h"usingname…

    2022年4月10日
    192
  • leetcode链表问题_反转一个单链表

    leetcode链表问题_反转一个单链表给你单链表的头指针 head 和两个整数 left 和 right ,其中 left <= right 。请你反转从位置 left 到位置 right 的链表节点,返回 反转后的链表 。示例 1:输入:head = [1,2,3,4,5], left = 2, right = 4输出:[1,4,3,2,5]示例 2:输入:head = [5], left = 1, right = 1输出:[5] 提示:链表中节点数目为 n1 <= n <= 500-500

    2022年8月9日
    5
  • Java中Arrays的asList()方法

    Java中Arrays的asList()方法Java 中 Arrays 的 asList 方法可以将数组转为 List 但是 这个数组类型必须是引用类型的 如果是 8 中基本数据类型就不可以原因如下 引用别人的一篇文章 最近在用 Arrays 的 asList 生成的 List 时 List 元素的个数时而不正确 Java 代码 经多次测试 只要传递的基本类型的数组 生成 List 的元素个数均为 1 nbsp chara

    2026年3月18日
    3
  • 用JS获取地址栏url参数的方法_js的url是啥

    用JS获取地址栏url参数的方法_js的url是啥有个url如下:http://passport.csdn.net/account/login?from=http%3a%2f%2fwrite.blog.csdn.net%2fpostedit我们该如何获取from这个参数的值呢?在网上搜了下方法很简单,如下,第一种是通过正则,第二种通过切串放进数组的方式:方法一:functiongetQueryString(name){

    2025年7月8日
    6
  • android之VOLD:staging目录作用与ASEC文件 -总结[通俗易懂]

    android之VOLD:staging目录作用与ASEC文件 -总结[通俗易懂]/mnt/secure/staging来看一下mountVol代码 int Volume::mountVol() {    int rc = 0;    char errmsg[255];    const char *mountPath;         char devicePath[255];                sprintf(device

    2022年7月20日
    18

发表回复

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

关注全栈程序员社区公众号