如何隐藏水平栏，并使左右按钮水平滚动？
[英]How can I make the horizontal bar hidden and make left and right buttons to scroll horizontally?
问题描述
How can I make the horizontal bar hidden and make left and right buttons to scroll horizontally? 
如何隐藏水平栏，并使左右按钮水平滚动？
Also the scrolling should be enabled for mobiles (touch enabled). 此外，还应该为手机启用滚动（启用触摸）。 I've created a jsfiddle of the markup I'm working on. 我已经创建了正在使用的标记的jsfiddle 。 Thanks a lot. 非常感谢。
<div class="ui grid container r-feat-prod-row">
<div class="row">
<!--featured column starts-->
<div class="left floaded fourteen wide column">
<div class="ui container">
<div class="ui segment r-feat-col">
<h4 class="ui horizontal divider header">Featured Category</h4>
<!--featured products starts-->
<div class="scroll">
<div class="r-content">
<div class="r-prod-card">
<div class="blurring dimmable image ">
<div class="ui dimmer">
<div class="content">
<div class="r-feat-header">
<div class="ui inverted">Product long title second line Product long title Product...</div>
<div class="ui divider"></div>
<div class="meta">
<span class="r-feat-header-price inverted">USD 100,000.00</span>
</div>
</div>
</div>
</div>
<img class="i-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/watch.png">
</div>
</div>
<div class="i-prod-card">
<div class="blurring dimmable image ">
<div class="ui dimmer">
<div class="content">
<div class="rfeat-header">
<div class="ui inverted">Product long title second line Product long title Product...</div>
<div class="ui divider"></div>
<div class="meta">
<span class="r-feat-header-price inverted">USD 100,000.00</span>
</div>
</div>
</div>
</div>
<img class="i-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/watch.png">
</div>
</div>
<div class="i-prod-card">
<div class="blurring dimmable image ">
<div class="ui dimmer">
<div class="content">
<div class="i-feat-header">
<div class="ui inverted">Product long title second line Product long title Product...</div>
<div class="ui divider"></div>
<div class="meta">
<span class="i-feat-header-price inverted">MVR 100,000.00</span>
</div>
</div>
</div>
</div>
<img class="i-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/watch.png">
</div>
</div>
<div class="i-prod-card">
<div class="blurring dimmable image ">
<div class="ui dimmer">
<div class="content">
<div class="i-feat-header">
<div class="ui inverted">Product long title second line Product long title Product...</div>
<div class="ui divider"></div>
<div class="meta">
<span class="r-feat-header-price inverted">USD 100,000.00</span>
</div>
</div>
</div>
</div>
<img class="r-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/watch.png">
</div>
</div>
<div class="i-prod-card">
<div class="blurring dimmable image ">
<div class="ui dimmer">
<div class="content">
<div class="rfeat-header">
<div class="ui inverted">Product long title second line Product long title Product...</div>
<div class="ui divider"></div>
<div class="meta">
<span class="r-feat-header-price inverted">USD 100,000.00</span>
</div>
</div>
</div>
</div>
<img class="r-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/2143s1/watch.png">
</div>
</div>
<div class="rprod-card">
<div class="blurring dimmable image ">
<div class="ui dimmer">
<div class="content">
<div class="r-feat-header">
<div class="ui inverted">Product long title second line Product long title Product...</div>
<div class="ui divider"></div>
<div class="meta">
<span class="r-feat-header-price inverted">USD 100,000.00</span>
</div>
</div>
</div>
</div>
<img class="r-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/21s71/watch.png">
</div>
</div>
<div class="r-prod-card">
<div class="blurring dimmable image ">
<div class="ui dimmer">
<div class="content">
<div class="r-feat-header">
<div class="ui inverted">Product long title second line Product long title Product...</div>
<div class="ui divider"></div>
<div class="meta">
<span class="r-feat-header-price inverted">USD 100,000.00</span>
</div>
</div>
</div>
</div>
<img class="i-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/watch.png">
</div>
</div>
<div class="r-prod-card">
<div class="blurring dimmable image ">
<div class="ui dimmer">
<div class="content">
<div class="r-feat-header">
<div class="ui inverted">Product long title second line Product long title Product...</div>
<div class="ui divider"></div>
<div class="meta">
<span class="r-feat-header-price inverted">USD 100,000.00</span>
</div>
</div>
</div>
</div>
<img class="i-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/2s4371/watch.png">
</div>
</div>
</div>
</div>
</div>
<!--featured products ends-->
</div>
</div>
<!-- right side 300x250 ad column starts-->
<div class="one wide column">
<div class="ui medium rectangle test ad r-ad-300" data-text="Advertising seems to be blocked by your browser.
It is fine, but please keep in mind that advertising helps us to host the website. If you find these ads intrusive or inappropriate, feel free to contact us.">
</div>
</div>
<!-- right side 300x250 ad column ends-->
<!--featured column ends-->
</div>
1 个解决方案
解决方案1
2 已采纳 2015-09-09 16:12:02
Since not all browsers allow you to style the scroll bar, I have used overflow-y:hidden; 由于并非所有浏览器都允许您设置滚动条的样式，因此我使用了overflow-y:hidden; on the parent to hide the scroll bar. 在父级上隐藏滚动条。 You can style the buttons however you want. 您可以根据需要设置按钮的样式。 I just put them at the bottom. 我只是把它们放在底部。
Demo: http://jsfiddle.net/hopkins_matt/muL9mrL1/1/ 演示： http ： //jsfiddle.net/hopkins_matt/muL9mrL1/1/
CSS: CSS：
/* featured column */
.ui.segment.i-feat-col {
overflow-y:hidden;
}
.i-feat-prod-row {
margin-top: 30px !important;
}
h4.ui.horizontal.divider.header {
color: #6CAF2B;
}
.i-feat-col {
height: 250px !important;
}
.i-prod-card {
width: 170px;
height: 170px;
position: relative;
display: inline-block;
background: #ffffff;
box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15);
margin: 0.5rem 1em;
margin-top: auto;
padding: 1em 1em;
border-radius: 4px;
border: 1px solid rgba(34, 36, 38, 0.15);
top: 6px;
}
div.scroll {
height: calc(100% + 10px);
overflow-x: hidden;
overflow-y: hidden;
white-space: nowrap;
-webkit-overflow-scrolling-x: touch;
}
div.scroll:hover {
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
}
.i-content {
white-space: nowrap;
}
.i-feat-header {
text-transform: capitalize;
font-size: 12px;
white-space: initial !important;
text-align: left;
line-height: 17px;
letter-spacing: normal;
padding-right: 11px;
padding-left: 11px;
clear: right;
}
.i-feat-header-price {
color: #F44336;
font-weight: 500;
font-size: 15px;
}
.i-feat-img {
display: block;
max-width: 140px;
width: auto;
height: auto;
}
.dimmable {
position: absolute;
}
JS: JS：
$(function () {
$('.i-prod-card .image').dimmer({
on: 'hover'
});
});
function scrollHoz(dir) {
if (dir == 'L') {
$('.scroll').animate({
scrollLeft: "-=" + 250 + "px"
});
} else if (dir == 'R') {
$('.scroll').animate({
scrollLeft: "+=" + 250 + "px"
});
}
}
HTML: HTML：
<div class="ui grid container i-feat-prod-row">
<div class="row">
<!--featured column starts-->
<div class="left floaded fourteen wide column">
<div class="ui container">
<div class="ui segment i-feat-col">
<h4 class="ui horizontal divider header">Featured Category</h4>
<!--featured products starts-->
<div class="scroll">
<div class="i-content">
<div class="i-prod-card">
<div class="blurring dimmable image ">
<div class="ui dimmer">
<div class="content">
<div class="i-feat-header">
<div class="ui inverted">Product long title second line Product long title Product...</div>
<div class="ui divider"></div>
<div class="meta"> <span class="i-feat-header-price inverted">MVR 100,000.00</span>
</div>
</div>
</div>
</div>
<img class="i-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/watch.png">
</div>
</div>
<div class="i-prod-card">
<div class="blurring dimmable image ">
<div class="ui dimmer">
<div class="content">
<div class="i-feat-header">
<div class="ui inverted">Product long title second line Product long title Product...</div>
<div class="ui divider"></div>
<div class="meta"> <span class="i-feat-header-price inverted">MVR 100,000.00</span>
</div>
</div>
</div>
</div>
<img class="i-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/watch.png">
</div>
</div>
<div class="i-prod-card">
<div class="blurring dimmable image ">
<div class="ui dimmer">
<div class="content">
<div class="i-feat-header">
<div class="ui inverted">Product long title second line Product long title Product...</div>
<div class="ui divider"></div>
<div class="meta"> <span class="i-feat-header-price inverted">MVR 100,000.00</span>
</div>
</div>
</div>
</div>
<img class="i-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/watch.png">
</div>
</div>
<div class="i-prod-card">
<div class="blurring dimmable image ">
<div class="ui dimmer">
<div class="content">
<div class="i-feat-header">
<div class="ui inverted">Product long title second line Product long title Product...</div>
<div class="ui divider"></div>
<div class="meta"> <span class="i-feat-header-price inverted">MVR 100,000.00</span>
</div>
</div>
</div>
</div>
<img class="i-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/watch.png">
</div>
</div>
<div class="i-prod-card">
<div class="blurring dimmable image ">
<div class="ui dimmer">
<div class="content">
<div class="i-feat-header">
<div class="ui inverted">Product long title second line Product long title Product...</div>
<div class="ui divider"></div>
<div class="meta"> <span class="i-feat-header-price inverted">MVR 100,000.00</span>
</div>
</div>
</div>
</div>
<img class="i-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/watch.png">
</div>
</div>
<div class="i-prod-card">
<div class="blurring dimmable image ">
<div class="ui dimmer">
<div class="content">
<div class="i-feat-header">
<div class="ui inverted">Product long title second line Product long title Product...</div>
<div class="ui divider"></div>
<div class="meta"> <span class="i-feat-header-price inverted">MVR 100,000.00</span>
</div>
</div>
</div>
</div>
<img class="i-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/watch.png">
</div>
</div>
<div class="i-prod-card">
<div class="blurring dimmable image ">
<div class="ui dimmer">
<div class="content">
<div class="i-feat-header">
<div class="ui inverted">Product long title second line Product long title Product...</div>
<div class="ui divider"></div>
<div class="meta"> <span class="i-feat-header-price inverted">MVR 100,000.00</span>
</div>
</div>
</div>
</div>
<img class="i-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/watch.png">
</div>
</div>
<div class="i-prod-card">
<div class="blurring dimmable image ">
<div class="ui dimmer">
<div class="content">
<div class="i-feat-header">
<div class="ui inverted">Product long title second line Product long title Product...</div>
<div class="ui divider"></div>
<div class="meta"> <span class="i-feat-header-price inverted">MVR 100,000.00</span>
</div>
</div>
</div>
</div>
<img class="i-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/watch.png">
</div>
</div>
</div>
</div>
</div>
<!--featured products ends-->
</div>
</div>
<!-- right side 300x250 ad column starts-->
<div class="one wide column">
<div class="ui medium rectangle test ad i-ad-300" data-text="Advertising seems to be blocked by your browser.
It is fine, but please keep in mind that advertising helps us to host the website. If you find these ads intrusive or inappropriate, feel free to contact us.">
<iframe class="i-frame-ad" src="http://admanager.ibay.com.mv/show.php?z=57" width="300" height="250" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="no"></iframe>
</div>
</div>
<!-- right side 300x250 ad column ends-->
<!--featured column ends-->
</div>
</div>
<button onclick="scrollHoz('L')">Left</button>
<button onclick="scrollHoz('R')">Right</button>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何使此jQuery轮播向右滚动而不是向左滚动？ - How can I make this jQuery carousel scroll right instead of left?
隐藏水平滚动条，但使数据水平滚动 - Hide Horizontal Scroll Bar but make data scroll horizontally
如何在左侧制作垂直滚动条，水平滚动条应从左侧底部开始 - how to make vertical scroll bar at left side and horizontal scroll bar should start from left side at bottom
如何使浮动标题列水平滚动并防止它们向左对齐？ - How can I make floating header columns to scroll horizontally and prevent them to align left?
如何使用左右按钮滚动div水平 - How the get scroll the div horizontal using left and right buttons
如何使水平滚动条永久可见？ - How to make the horizontal scroll bar permanently visible?
如何在 jQuery 中创建一个计数器变量，当用户单击左右箭头按钮时更改图像？ - How can I make a counter variable in jQuery that changes the images when the user clicks on the right and and left arrow buttons?
当滚动到达容器末尾时，如何使左/右按钮消失？ - How can I make left/right button disappear when the scroll gets to the end of the container?
带有左右箭头键的水平滚动条 - Horizontal scroll bar with right and left arrow keys
如何使表格从右向左滚动 - How to make a table to scroll from right to left
相关标签