个人中心
gpt4 book ai didi

css - 使用此 CSS，如何在 iPad 2 中添加 scroll 4？

转载 作者：行者123 更新时间：2023-11-28 13:52:37 25 4
gpt4 key购买 nike 

<html>
<head>
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript" src="js/iscroll.js"></script>
  <script type="text/javascript" src="js/jquery-ui.min.js"></script>
  <link rel="stylesheet" type="text/css" href="js/jquery-ui.css" />
  <link rel="stylesheet" type="text/css" href="css/drag.css" />
  <script type="text/javascript">
    $(document).ready(function(){
      var myScroll;
      function loaded() {
        myScroll = new iScroll('wrapper');
      }
      document.addEventListener('DOMContentLoaded', loaded, false);
    });
  </script>
</head>
<body>
<div id="wrapper" style="overflow: hidden; ">
  <div id="scroll" style="-webkit-transition: -webkit-transform 0ms; -webkit-transform-origin: 0px 0px; -webkit-transform: translate3d(0px, 0px, 0px);" >
  <ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>c</li>
    <li>c</li>
    <li>c</li>
    <li>c</li>
    <li>c</li>
    <li>c</li>
    <li>c</li>
    <li>c</li>
    <li>c</li>
    <li>c</li>
    <li>c</li>
    <li>d</li>
  </ul>
</div>
<div class="myScrollbarV" style="pointer-events: none; -webkit-transition: opacity 0ms 0ms; overflow: hidden; opacity: 1; ">
  <div style="pointer-events: none; -webkit-transition: -webkit-transform 0ms cubic-bezier(0.33, 0.66, 0.66, 1); height: 40px; -webkit-transform: translate3d(0px, 221px, 0px); ">
  </div>
</div>
</div>
</body>
</html>

以上是我的 iscroll4 HTML 代码，我使用的是以下 CSS:

.wrapper{
  position: absolute;
  z-index: 1;
  top: 45px;
  bottom: 48px;
  left: 0;
  width: 100%;
  background: #AAA;
  overflow: auto;
}
.scroll{
  position: relative;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  float: left;
  width: 100%;
  padding: 0;
}
.div2{
  list-style-type:none;
}
.myScrollbarV {
  position:absolute;
  z-index:100;
  width:8px;bottom:7px;top:2px;right:1px
}
.myScrollbarV > div {
  position:absolute;
  z-index:100;
  width:100%;
  /* The following is probably what you want to customize */
  background:-webkit-gradient(linear, 0 0, 100% 0, from(#f00), to(#900));
  background-image:-moz-linear-gradient(top, #f00, #900);
  background-image:-o-linear-gradient(top, #f00, #900);
  border:1px solid #900;
  -webkit-background-clip:padding-box;
  -moz-background-clip:padding-box;
  -o-background-clip:padding-box;
  background-clip:padding-box;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  -o-box-sizing:border-box;
  box-sizing:border-box;
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  -o-border-radius:4px;
  border-radius:4px;
  -webkit-box-shadow:inset 1px 1px 0 rgba(255,255,255,0.5);
  -moz-box-shadow:inset 1px 1px 0 rgba(255,255,255,0.5);
  -o-box-shadow:inset 1px 1px 0 rgba(255,255,255,0.5);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,0.5);
}

我只能看到那个红色的卷轴，但不能滚动它。有人可以帮帮我吗？是不是iscroll的CSS部分有问题？我正在使用 this作为实现我的滚动的引用。

最佳答案

首先要注意的是:您不需要声明 var myScroll;，事实上，您不应该这样做。您应该将 iScroll 绑定(bind)到窗口对象，以便您可以在必要时解除分配它，这样您就可以检查/调试它的行为。

在您的浏览器中设置一个 javascript 断点(Break on Next 按钮应该起作用)并检查您的 window.myScroll 对象。有时，iScroll 认为其滚动器或包装器的计算高度为零，除非手动设置，因此它会自行禁用 vScroll 和 hScroll。

尝试在调整 CSS 后在 javascript 控制台中手动执行 window.myScroll.refresh();，它最终应该会开始滚动。然后在 drag.cs​​s 文件中进行您在浏览器中所做的 CSS 更改。

(PS:如果您愿意，您也可以从滚动条和包装器中删除内联样式，因为 iScroll 会自动应用这些样式)

关于css - 使用此 CSS，如何在 iPad 2 中添加 scroll 4？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11255739/

25 4 0
文章推荐： css - 缩进层次表结构
文章推荐： html - Firefox 2 在尝试跨浏览器内联 block 技巧时卡住
文章推荐： html - 推拉门居中
文章推荐： asp.net - 为什么在 Contional Comment 声明样式表应该被忽略时加载样式表？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com