safari苹果不支持修改滚动条

最新推荐文章于 2024-04-21 09:10:41 发布
最新推荐文章于 2024-04-21 09:10:41 发布
阅读量2k 收藏
点赞数
分类专栏： 前端 文章标签： 前端 safari
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lookBackward/article/details/104550633
版权

在用element UI  el-table时想修改滚动条样式，发现chrome可以修改，但是safari不生效。后来发现可以曲线救国。element-UI有个隐藏的标签：<el-scrollbar>。上代码：

<el-scrollbar>
  <div style="width: 740px">
    <el-table></el-table>
  </div>
</el-scrollbar>

width：740px是table本身的宽度。如果屏幕小于这个宽度，就会生成滚动条拉。然后可以改这个滚动条标签的样式。

lookBackward
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
仿网易ios滚动条控件的实现
03-26
ios网易新闻滚动栏的实现
仿苹果网站的滚动条
11-28
首先，我们需要了解苹果滚动条的基本特点。苹果网站的滚动条通常具有以下特性： 1. **透明度**：在页面静止时，滚动条通常是半透明的，这样不会过多地干扰页面的视觉效果。当用户滚动时，滚动条会变得更明显，以便...
隐藏ie的滚动条 兼容10+
lixiaohua66的博客
09-26 529
.content{ /*兼容ie隐藏滚动条*/ -ms-scroll-chaining: chained; -ms-overflow-style: none; -ms-content-zooming: zoom; -ms-scroll-rails: none; -ms-content-zoom-limit-min: 100%; -ms-content-zoom-limit-max: 500%;...
滚动条详解：跨平台iOS、Android、小程序滚动条隐藏及自定义样式综合指南
最新发布
JINGWHALE
04-21 1809
随着用户界面体验提升的要求，滚动条自定义样式以及滚动条隐藏精致化的需求日渐增加，本文详细介绍了小程序、iOS、Android平台滚动条的隐藏方法，以及滚动条一般自定义样式的方法。在保持界面整洁、避免内容溢出的同时，确保用户能够访问所有信息，提升浏览体验。
IOS系统下（iPhone、iPad）滚动条不能用（失效）问题
专注css,js,jq前端开发研究
07-22 5871
解决办法：在iframe 父级DIV中设置样式：-webkit-overflow-scrolling: touch;即可
iOS页面滚动兼容性问题
weixin_57157220的博客
07-11 272
这几天发现了个问题iOS列表页到详情页然后返回到列表页白屏，有时候会半个页面白屏，有时候会整个页面白屏当然我的是整个白屏，需要滚动下页面才可以展示出来东西，到网上找了好多办法，最后使用history 新增的一个属性 成功解决 ...
小程序自定义音频组件，带滚动条，IOS循环失效问题
weixin_34023863的博客
08-09 270
摘要：首先自定义音频组件，是因为产品有这样的需求，需要如下样式的 而微信小程序API给我们提供的就是这样的 而且产品需要小程序有后台播放功能，所以我们不考虑小程序的 audio 组件，即使官方推荐更强大的 wx.createInnerAudioContext 但是不符合需求，所以这里用到的是 backgroundAudioManager() https://developers...
iphone safari不支持position fixed的解决方法
09-05
然而，苹果的iPhone Safari浏览器在早期版本中并不完全支持这个属性，尤其是在处理滚动事件时会出现问题，导致元素在滚动时无法正确保持其固定位置，这给开发者带来了一些挑战。 为了解决这个问题，开发者通常需要...
使用jQuery判断浏览器滚动条位置的方法
01-19
1、我一开始用swipeup和swipedown来做，发现因为有滚动条，不会触发。因此只能判断滚动条是上滚下滚等。关于手机手势，后面的文章会介绍，欢迎关注！ 2、通过上滚下滚来让底部导航显示或者因此，安卓上面的浏览器都...
在IOS系统上滚动条滚动到指定的位置出现空白页面的解决方案
08-31
在iOS系统的Web应用中，开发者可能会遇到一个棘手的问题，那就是当尝试使用滚动条滚动到页面的特定位置时，页面会出现空白区域。这个问题通常与 `-webkit-overflow-scrolling` 这个CSS属性有关。该属性是苹果特有的...
很绚的滚动条,scrollbar
07-14
4. 使用操作系统API：在桌面应用开发中，可以利用操作系统提供的API来改变滚动条的外观和行为，例如在Windows上使用`SystemParametersInfo`函数。 无论哪种方法，自定义滚动条都需要考虑兼容性和性能问题。兼容性...
ios部分机型不生效：滚动条滚动开启与禁止
qq_32741973的博客
09-16 708
document.body.style.overflow = "auto"; //开启 document.body.style.position = "static";//开启（推荐） document.body.style.overflow = "hidden";//禁止 document.body.style.position = "fixed";//禁止（推荐）
移动端苹果浏览器默认滚动条bug处理（橡皮糖现象 ） 亲测有效
lazy_tomato的博客
06-07 1757
START 番茄大半夜不睡觉又来写点啥了。 最近遇到苹果浏览器的展示bug，百度到有人说这是橡皮泥效果。 简单的概括呢，就是一个html页面，本身是没有滚动条的，在安卓，pc上都是正常显示的，但是呢，苹果浏览器，就算你本身页面没有滚动条，还会出现一个滚动条，强行上拉拖拽就会样式乱码，影响到我们的滚动条事件。刚好最近写了一个顶部的导航栏，移动端一看，样式全部都乱套了。 记录一下无滚动条页面，苹果手机默认携带的滚动条解决方案 问题说明 如下图 demo代码 <template> &
2022-11-18 工作记录--CSS/JS-处理动态滚动条在ios的兼容问题
weixin_48850734的博客
02-10 262
CSS/JS-处理动态滚动条在ios的兼容问题
Ipad(IOS 5以前)的safari浏览器下， 如何实现单指滑动Scroll （ html + Jquery 实现）
闭月羞花猫
01-16 5962
闭月羞花猫  2012年1月 于河西新城科技园 项目上有个要求： 一个Jquery的项目，需要在ipad上面，对于横向，纵向的scroll bar需要能实现单指滑动的效果。 似乎目前的ipad(IOS5以前)版本，对于scrollbar的单指滑动不能很好的支持。 注：IOS5版本则不需要做任何的特殊的script，只需要用html自带的overflow属性就可以了。 于做
Safari低版本不兼容滚动条解决方案
ma987674712的博客
11-15 2858
Safari低版本浏览器没有将CSS3中的一些属性定义标准，设置ifarme或者DIV滚动条会出现无法滚动的异常，可增加下面的代码即可解决： div style="-webkit-overflow-scrolling:touch;overflow:auto!important;height: 300px"> div>这里是需要滚动的内容div> div> 核心代码： -we
iOS 修改状态栏的颜色的时候，始终无法高亮的解决办法
woshidaniu的专栏
11-27 1620
添加视图切换的时候如果设置了下面的值 nav.modalPresentationStyle=UIModalPresentationOverCurrentContext; 坑就开始了  [[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleLightContent];     [self
即时聊天软件发消息界面，scrollTo不生效
weixin_42371427的博客
11-20 556
react，即时通信，scrollIntoView
element UI table表格不兼容safari浏览器，已解决
weixin_43105356的博客
05-08 3579
问题描述： el-table加了show-overflow-tooltip这个属性以后，如果有内容过长的行信息，用苹果safari浏览器，就会出现如下情况，表格整体会变得奇奇怪怪的。 解决办法 网上常见的一些方法，试过，但是没啥用，有的说是电脑分辨率导致的，具体原因说实话我不太清楚，有了解这个的bro，可以留言指导一下。 我用了自己写样式的办法，来解决了这个兼容性问题。 可以满足有超多内容适合，只显示三行，多余的省略号显示，鼠标方上去以后，可以悬浮出全部内容 1、效果如下： 2、具体解决办法： 2.1
使用css改变滚动条样式 并使滚动条不贴边
08-09
要使用 CSS 改变滚动条样式并使其不贴边，可以使用以下代码： ```css /* 改变滚动条的样式 */ ::-webkit-scrollbar { width: 10px; /* 设置滚动条宽度 */ background-color: #f5f5f5; /* 设置滚动条背景颜色 */ } /* 改变滚动条滑块的样式 */ ::-webkit-scrollbar-thumb { background-color: #888; /* 设置滑块颜色 */ border-radius: 5px; /* 设置滑块圆角 */ } /* 改变滚动条滑块鼠标悬停时的样式 */ ::-webkit-scrollbar-thumb:hover { background-color: #555; /* 设置鼠标悬停时的颜色 */ } /* 改变滚动条轨道的样式 */ ::-webkit-scrollbar-track { background-color: #f5f5f5; /* 设置轨道背景颜色 */ } /* 改变滚动条轨道鼠标悬停时的样式 */ ::-webkit-scrollbar-track:hover { background-color: #eee; /* 设置鼠标悬停时的颜色 */ } /* 隐藏滚动条上下按钮 */ ::-webkit-scrollbar-button { display: none; } /* 隐藏滚动条角落 */ ::-webkit-scrollbar-corner { background-color: transparent; } /* 设置内容区域不贴边 */ .element { overflow: auto; padding-right: 20px; /* 添加右边距以避免滚动条贴边 */ } ``` 将上述代码应用到你想要改变滚动条样式的元素上，例如一个具有类名为 `element` 的元素。请注意，这些样式只适用于支持 WebKit 内核的浏览器（如 Chrome、Safari 等）。 希望对你有所帮助！如有其他问题，请随时提问。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值