第一個(gè)形象是我擁有的,第二個(gè)是我想要完成的結(jié)果。
到目前為止,我意識(shí)到禁用兩個(gè)勾號(hào)(在上圖中)就可以了,但是如何編寫(xiě)css代碼呢?
下面是我目前用來(lái)根據(jù)自己的喜好調(diào)整小部件的代碼。
span[data-pin-log="pinterest"] {
overflow: scroll;
overflow-x: hidden;
}
span[data-pin-log="embed_grid"]::-webkit-scrollbar {
width: 0; /* Remove scrollbar space */
background: transparent; /* Optional: just make scrollbar invisible */
}
/* Optional: show position indicator in red */
span[data-pin-log="embed_grid"]::-webkit-scrollbar-thumb {
background: #FF0000;
}
#pinterest [class$=_button] {
display: none !important;
}
#pinterest [class$=_button] {
display: none !important;
}
#pinterest [class$=_hd] {
display: none !important;
}
body > span[data-pin-log="embed_grid"] {
border: none;
}
<a data-pin-do="embedBoard" data-pin-board-width="350" data-pin-scale-height="500" data-pin-scale-width="130" ></a>
<script async defer src="http://assets.pinterest.com/js/pinit.js"></script>
遵循我的css代碼:
/* Remove scrollbar */
body > span[data-pin-log="embed_grid"] > span[data-pin-log="embed_grid"] {
overflow: scroll;
overflow-x: hidden;
}
body > span[data-pin-log="embed_grid"] > span[data-pin-log="embed_grid"]::-webkit-scrollbar {
width: 0; /* Remove scrollbar space */
}
/* Remove border */
body > span[data-pin-log="embed_grid"] {
border: none;
padding: 0 !important;
}
/* Remove padding */
body > span[data-pin-log="embed_grid"] > span[data-pin-log="embed_grid"] {
padding: 0;
}
/* Hide header (pinterest logo) */
body > span[data-pin-log="embed_grid"] > span[data-pin-log="embed_grid"]:first-child {
display: none;
}
/* Hide follow button */
body > span[data-pin-log="embed_grid"] > span[data-pin-log="embed_user_ft"]:last-child {
display: none;
}
Codepen上的完整示例