Kendo UI下拉列表移动滚动

时间:2014-04-09 07:02:45

标签: javascript html5 kendo-ui telerik kendo-mobile

我目前正在使用Kendo UI开发应用程序。我使用像这样的下拉列表

Kendo UI dropdownlist

在浏览器上工作正常。我可以用鼠标滚轮打开列表滚动,但是当我尝试在带触摸的设备(平板电脑或智能手机)上使用它时,我无法在下拉列表中滚动。

如何在下拉列表中添加监听器或其他内容,这样可以滚动?

1 个答案:

答案 0 :(得分:0)

从这里开始:

Kendo Support Forum - Unable to scroll on iPad

  

启用DropDownList(特别是弹出窗口)的滚动   需要包含kendo.mobile.core.js,kendo.mobile.scroller.js。校验   this jsFiddle demo,其中显示了如何在移动设备中启用滚动功能   设备

来自小提琴的css:

.km-touch-scrollbar {
  position: absolute;
  visibility: hidden;
  z-index: 200000;
  height: .3em;
  width: .3em;
  background-color: #333;
  opacity: 0;
  border-radius: 0.4em;
  -moz-border-radius: 0.4em;
  -webkit-border-radius: 0.4em;
  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transition: opacity 0.3s linear;
  -moz-transition: opacity 0.3s linear;
  transition: opacity 0.3s linear;
}
.km-vertical-scrollbar {
  height: 100%;
  right: 1px;
  top: 0;
}
.km-horizontal-scrollbar {
  width: 100%;
  left: 0;
  bottom: 1px;
}
.km-scroll-container {
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-margin-collapse: separate;
}
.km-android .km-touch-scrollbar {
  background-color: #33b5e5;
  border-radius: 0;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
}