在鼠标移入时才显示scroll，而不占用div宽度的方法

最新推荐文章于 2024-01-10 17:45:35 发布
最新推荐文章于 2024-01-10 17:45:35 发布
阅读量1.6k 收藏 1
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38408390/article/details/117249601
版权
本文介绍了几种在鼠标移入时显示滚动条而不影响div宽度的方法，包括使用`overflow: overlay`（Chrome专用）、通过`margin-right`调整、预先预留滚动条宽度、使用Sass代码以及子容器添加`margin-right`属性。
摘要由CSDN通过智能技术生成

一、overflow: overlay（只chrome可用）

overflow: overlay;

二、margin-right
margin-right利用100%是自身当前宽度的特点，减去出现滚动条前的固定宽度，再加上滚动条的宽度；

margin-right: calc(100% - 80vw + 7px);

三、默认预留滚动条宽度，在显示滚动条时再margin-right:0
下面是sass的代码

.doc-drawer-box {
   
  height
最低0.47元/天 解锁文章
qq_38408390
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
不隐藏滚动条使滚动条不占据位置
weixin_45634433的博客
07-14 3433
问题描述: 之前自己仿写了一个聊天机器人的小项目,页面的高度会随着聊天数量的增加而变大,进而出现滚动条,滚动条默认的宽度是17px,所以每次出现滚动条右边的内容区域就会被挤压,影响布局 解决办法: 1.使用margin-right:calc(100% - 100vw ); 100% 是浏览器的可用宽度 , 100vw是浏览器的内部宽度window.innerWidth 是包含滚动条在内的宽度,在没有滚动条的时候margin-right:0;没哟影响,在有滚动条的时候,margin-right:-17px,
小程序scroll-view与css左右滑动超出部分背景颜色不显示的解决方法
01-04
然而，在实际操作中，开发者可能会遇到一个常见的问题：当`scroll-view`内容超过其容器宽度时，左右滑动过程中超出部分的背景颜色无法正常显示。这会严重影响用户的浏览体验，使得内容区域看起来不完整或者断层。...
Html+CSS实现滚动条不挤占内容区宽度
热门推荐
WWF_HelloWorld
09-01 3万+
思路来源于该文章：https://www.cnblogs.com/yigeqi/p/5488554.html 但该文章似乎有什么重要的要点没有交代，直接按照文中的css写并不能实现所要的效果。 1. 目的： 有一个滚动区，默认是不显示滚动条的，在鼠标移入时显示滚动条，在正常情况下，滚动条会挤占内容区宽度，使得内容区变窄，会晃动一下。 要实现的效果是，鼠标移入显示滚动条，滚动条就像浮在上层一样。...
css滚动条不占用宽度_CSS隐藏滚动条并可以滚动内容的几种方式
weixin_39525617的博客
11-29 9740
前言：当我们的内容超出了我们的 div，往往会出现滚动条，影响美观，尤其是当我们在做一些导航菜单的时候，滚动条一出现就破坏了 UI 效果。我们不希望出现滚动条，也不希望超出去的内容溢出，就要保留鼠标滚动的效果。我们经常在前端开发中遇到这种情况，最容易想到的是加一个 iscroll 插件，但其实现在 CSS 也可以实现这个功能，下面一起看看实现的几种方法。1.方法一使用三个容器包围起来，不需要计算滚...
滚动条出现，挤压页面宽度，导致布局错乱的三种解决方法
qq_36132291的博客
04-21 1万+
出现原因 页面内容超出高度，浏览器出现滚动条的时候，因为滚动条是占位的，所以页面会被挤压，导致页面内容出现错乱。 解决方案一：新属性 overlay （目前仅chrome支持） chrome下overflow有个新的属性值overlay，这个属性简直就是为了这个问题而生，他和auto有点像，但是区别就是在触发滚动条时候并不挤压空间。但是非常遗憾，这个属性值目前只有chrome支持。 html { overflow-y: overlay; } 解决方案二：margin-right: calc(100%
如何让滚动条不占宽度
e87e09e11的博客
10-10 2万+
div定义的宽度 = 内容宽度+滚动条宽度 出现滚动条会导致内容偏移，想让滚动条不占宽度 不影响内容的排版,百度到的方法都不能解决问题 原来滚动条是可以设置宽度为0的这样滚动条不出现，内容也可以滚动   selector::-webkit-scrollbar{ width:0; }...
如何解决滚动条scrollbar出现造成的页面宽度被挤压的问题？
最新发布
sun19931127的博客
01-10 1431
页面滚动条造成宽度减小的场景很常见了，由于div块级元素的流动性，其宽度默认为100%的body宽度，但是当容器的高度超过视口宽度时候，页面就会出现滚动条，这个滚动条的宽度就会挤压body的可用宽度，也就是会挤压我们的容器的宽度，造成页面晃动的现象，很不友好，下面就来探讨下如何解决这个滚动条的问题。
jQuery设置div一直在页面顶部显示的方法
12-09
jQuery部分 代码如下: [removed][removed] [removed] $(function () { var elm = $(‘#... $.event.add(window, “scroll”, function () { var p = $(window).scrollTop(); $(elm).css(‘position’, ((p) > sta
div scroll始终在最底部的实现代码
09-06
这里的`overflow:auto`样式属性是关键，它告诉浏览器在这个div内创建一个可滚动区域，当内容超出div的高度时，允许用户滚动查看。 接下来，我们用JavaScript实现自动滚动到最底部的功能： ```javascript function ...
Html+CSS实现滚动条不挤占内容区宽度.zip
09-01
看博客就能懂，不要轻易浪费积分下载该文件 博客地址：https://blog.csdn.net/fukaiit/article/details/100069537
页面出现滚动条的时候如何让滚动条不影响页面宽度
09-22
主要介绍了页面出现滚动条的时候如何让滚动条不影响页面宽度，需要的朋友可以参考下
div模拟滚动条当div宽度小于18时滚动条不滚动
12-03
IE浏览器，div模拟滚动条，div宽度小于18 滚动条不滚动 环境 win7 IE 10 代码： 复制代码代码如下: <!DOCTYPE html> <html> <head> <title>scroll</title> <meta http-equiv=”...
js实现当鼠标移到表格上时显示这一格全部内容的代码
11-22
想实现当鼠标移上去的时候可以显示这一行被隐藏的内容。当然这个网上有很多插件，但是我没有用，还是自己写了一个。 css部分 <style> #showbox { width: 150px; min-height: 50px; font: 100 14px/1 ...
设置鼠标移动上去列表显示滚动条
瘦瘦瘦大人的博客
10-23 1605
设置鼠标移动上去列表显示滚动条 有一个很坑的就是没有hover之前列表要设置overflow:hidden，否则鼠标移动上去之后就会滚动回到刚刚开始的位置 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit
CSS设置滚动条不占空间、单行/多行文本超出时显示省略号
https://github.com/blingbling-110
07-09 2662
MDN overflow text-overflow 滚动条不占空间 overflow: overlay; 行为与auto相同，但滚动条绘制在内容之上而不是占用空间。 仅在基于WebKit（例如，Safari）和基于Blink的（例如，Chrome或Opera）浏览器中受支持。 超出文本显示省略号 text-overflow: ellipsis; 这个关键字的意思是“用一个省略号 (’…’, U+2026 HORIZONTAL ELLIPSIS)来表示被截断的文本”。这个省略号被添加在内容区域中，因此会
滚动条挤占内容宽度、破坏布局的解决方案
Beijiyang
08-21 3万+
问题 当内容增多，滚动条从无到有时，它的出现挤压了内容宽度，导致原来设计好的布局被破坏。 原因 滚动条的宽度是计算到内容 content 里的。 解决思路 增加一个中间层，使得外部容器宽度保持设计宽度，内部元素排列保持不变。 具体案例 使用 antd 的 Modal 弹窗，基于其最简单的基本示例，如图： 希望的效果： 弹窗定宽定高； 一排4个，宽度、边距固定； 当总...
关于DIV滚动条，不溢出div
qq_45450789的博客
04-20 392
<div style="overflow:scroll"> </div>
让页面出现滚动条的时候，滚动条不影响页面宽度
code旅行者的专栏
04-10 2万+
设置body的宽度 $("body").css("width", $(window).width());
写一个dv-scroll-board鼠标移入信息显示完整的demo
04-20
好的，以下是一个简单的dv-scroll-board鼠标移入信息显示完整的示例代码： HTML代码： ```html <div class="scroll-board"> <ul> <li>这是一条消息1</li> <li>这是一条消息2</li> <li>这是一条消息3</li> <li>这是一条消息4</li> <li>这是一条消息5</li> </ul> </div> ``` CSS代码： ```css .scroll-board { width: 300px; height: 50px; overflow: hidden; border: 1px solid #ccc; } .scroll-board ul { position: relative; width: 100%; height: 100%; margin: 0; padding: 0; list-style: none; animation: scroll-board 10s linear infinite; } .scroll-board ul li { position: absolute; top: 0; left: 0; height: 50px; line-height: 50px; padding: 0 20px; white-space: nowrap; } @keyframes scroll-board { 0% { transform: translateY(0); } 100% { transform: translateY(-100%); } } ``` JavaScript代码： ```js var scrollBoard = document.querySelector('.scroll-board'); var messageList = scrollBoard.querySelector('ul'); var messageItems = messageList.querySelectorAll('li'); messageList.addEventListener('mouseover', function(e) { if (e.target.nodeName === 'LI') { e.target.setAttribute('title', e.target.textContent); } }); messageList.addEventListener('mouseout', function(e) { if (e.target.nodeName === 'LI') { e.target.removeAttribute('title'); } }); ``` 以上代码实现了一个可滚动的消息列表，并通过鼠标移入显示完整信息的效果。当鼠标移入某条消息时，该消息将显示完整内容；当鼠标移出时，完整内容消失。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值