我尝试在滚动条的左侧和右侧添加箭头作为第二个导航工具。
滚动条现在可以移动设备并用手指滚动
知道怎么做吗
CSS
SELECT IFNULL(tmp.name,'')
HTML
<style>
a
{
color: #252525;
text-decoration-line: none;
text-decoration-style: solid;
transition-duration: 100ms;
transition-timing-function: linear;
transition-delay: 20ms;
transition-property: color, background-color;
}
.window {
margin-top: 12px;
overflow-y: hidden;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
position: relative;
margin-bottom: 20px;
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
/* fixes scrolling in IE */
padding-left: 0;
padding-right: 0;
margin-top: 50px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 0px;
}
.ie8 .window
padding-top: 0;
padding-bottom: 0;
}
.slider-frame-wrapper{
overflow: hidden;
overflow-x: scroll;
}
.slider-frame {
overflow: visible;
margin-bottom: 0;
white-space: nowrap;
}
.ie8 .slider-frame {
background-color: #ececec;
background-image: none;
background-repeat: repeat;
background-attachment: scroll;
background-clip: border-box;
background-origin: padding-box;
background-position-x: 0%;
background-position-y: 0%;
background-size: auto auto;
font-weight: bold;
font-size: 16px;
padding-top: 10px;
padding-bottom: 10px;
margin-bottom: 0px;
}
.slider-panel {
max-width: 270px; /* width of each individual items */
display: inline-block;
vertical-align: top;
margin-right: 7px;
white-space: normal;
border-right-width: 3px;
border-right-style: solid;
border-right-color: black;
padding-left: 10px;
padding-right: 20px;
float: none;
}
</style>
答案 0 :(得分:0)
设置.window {overflow-x:visible;在你的CSS中。现在,您可以用手指操作来平移整个HTML。
出于某种原因,StackOverflow坚持认为我的答案会更长,或者它不会让我放置它。