jquery 滚动条 |样式标签与样式属性

标签 jquery css scrollbar

$(document).ready(function(){
  $('.scrollcontainer1').scrollbar();
  $('.scrollcontainer2').scrollbar();
})
.scrollcontainer1{
width:200px;
height:200px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.scrollbar/0.2.11/jquery.scrollbar.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.scrollbar/0.2.11/jquery.scrollbar.js"></script>
<h1>Width and height in style tag</h1>
<div class="scrollcontainer1 inner-scrollbar">
jniuniuiubiubiuiuhiuhiuuy hbubu ubiub ubiu uiiu jniuniuiubiubiuiuhiuhiuuy hbubu ubiub ubiu uiiu jniuniuiubiubiuiuhiuhiuuy hbubu ubiub ubiu uiiu jniuniuiubiubiuiuhiuhiuuy hbubu ubiub ubiu uiiu jniuniuiubiubiuiuhiuhiuuy hbubu ubiub ubiu uiiu jniuniuiubiubiuiuhiuhiuuy hbubu ubiub ubiu uiiu jniuniuiubiubiuiuhiuhiuuy hbubu ubiub ubiu uiiu
jniuniuiubiubiuiuhiuhiuuy hbubu ubiub ubiu uiiu jniuniuiubiubiuiuhiuhiuuy hbubu ubiub ubiu uiiu jniuniuiubiubiuiuhiuhiuuy hbubu ubiub ubiu uiiu jniuniuiubiubiuiuhiuhiuuy hbubu ubiub ubiu uiiu jniuniuiubiubiuiuhiuhiuuy hbubu ubiub ubiu uiiu jniuniuiubiubiuiuhiuhiuuy hbubu ubiub ubiu uiiu jniuniuiubiubiuiuhiuhiuuy hbubu ubiub ubiu uiiu
</div>
<h1>Width and height in style attr</h1>
<div class="scrollcontainer2 inner-scrollbar" style="width:200px;height:200px">
jniuniuiubiubiuiuhiuhiuuy hbubu ubiub ubiu uiiu jniuniuiubiubiuiuhiuhiuuy hbubu ubiub ubiu uiiu jniuniuiubiubiuiuhiuhiuuy hbubu ubiub ubiu uiiu jniuniuiubiubiuiuhiuhiuuy hbubu ubiub ubiu uiiu jniuniuiubiubiuiuhiuhiuuy hbubu ubiub ubiu uiiu jniuniuiubiubiuiuhiuhiuuy hbubu ubiub ubiu uiiu jniuniuiubiubiuiuhiuhiuuy hbubu ubiub ubiu uiiu
jniuniuiubiubiuiuhiuhiuuy hbubu ubiub ubiu uiiu jniuniuiubiubiuiuhiuhiuuy hbubu ubiub ubiu uiiu jniuniuiubiubiuiuhiuhiuuy hbubu ubiub ubiu uiiu jniuniuiubiubiuiuhiuhiuuy hbubu ubiub ubiu uiiu jniuniuiubiubiuiuhiuhiuuy hbubu ubiub ubiu uiiu jniuniuiubiubiuiuhiuhiuuy hbubu ubiub ubiu uiiu jniuniuiubiubiuiuhiuhiuuy hbubu ubiub ubiu uiiu
</div>

这是我的问题。当我在样式属性 div 宽度和高度中使用宽度和高度时,自动设置为内容宽度和高度。但是当我将宽度和高度放在样式标签中时,它就可以工作了。我想用 php 动态改变宽度和高度。所以我想用第二种方法。你能推荐一种方法吗?

最佳答案

这个库似乎覆盖了现有的内联样式:

enter image description here

我认为最安全的做法是使用 Javascript 从 PHP 捕获这些值,并在初始化滚动条后动态更改 div 高度。


编辑:

所以我对如何安全地实现这种能力很感兴趣,并查看了 the docs我注意到他们在内部 div 中设置内联样式并将滚动条应用于包装 div。所以也许这也值得一看。

关于jquery 滚动条 |样式标签与样式属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47982671/

相关文章:

javascript - Bootstrap/JQuery : Cannot get modal to show

javascript - 将 <div> 设置为比动态大小的 <div> 高特定数量

JavaFX ScrollBar 值混淆

reactjs - 如何在react-virtualized(CodeSandBox)中向表格添加水平滚动条

javascript - 在没有外部依赖的情况下在 React 中修改滚动条

javascript - 我在 jPushMenu 中添加了 "input",但如果我在输入中添加 "click",菜单将关闭。我可以阻止这种行为吗?

jquery - iframe 中的 colorbox 内容(定位)问题

css - 两个 Angular 线箭头 CSS

当位于 :fixed pseudo-element 位置时,CSS 背景图像不会显示在 IE11 上

Jquery 切换文本,选择所有实例