Θέλω να μπορώ να κάνω κύλιση σε ολόκληρη τη σελίδα, αλλά χωρίς να εμφανίζεται η γραμμή κύλισης.
Στο Google Chrome είναι:
::-webkit-scrollbar {
display: none;
}
Αλλά ο Mozilla Firefox και ο Internet Explorer δεν φαίνεται να λειτουργούν έτσι.
Το δοκίμασα επίσης σε CSS:
overflow: hidden;
Αυτό αποκρύπτει τη γραμμή κύλισης, αλλά δεν μπορώ να κάνω κύλιση πλέον.
Υπάρχει κάποιος τρόπος να αφαιρέσω τη γραμμή κύλισης και παράλληλα να μπορώ να μετακινηθώ σε ολόκληρη τη σελίδα;
Μόνο με CSS ή HTML, παρακαλώ.
Απλά μια δοκιμή που λειτουργεί μια χαρά.
#parent{
width: 100%;
height: 100%;
overflow: hidden;
}
#child{
width: 100%;
height: 100%;
overflow-y: scroll;
padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
box-sizing: content-box; /* So the width will be 100% + 17px */
}
[Working Fiddle][1]
Δεδομένου ότι το πλάτος της γραμμής κύλισης διαφέρει στα διάφορα προγράμματα περιήγησης, είναι προτιμότερο να το χειρίζεστε με JavaScript. Αν κάνετε Element.offsetWidth - Element.clientWidth
, θα εμφανιστεί το ακριβές πλάτος της γραμμής κύλισης.
[JavaScript Working Fiddle][2]
Χρησιμοποιώντας Position: absolute
,
#parent{
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
#child{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: -17px; /* Increase/Decrease this value for cross-browser compatibility */
overflow-y: scroll;
}
[Working Fiddle][3]
[JavaScript Working Fiddle][4]
5]: Με βάση αυτή την απάντηση, δημιούργησα ένα απλό πρόσθετο κύλισης.
Χρήση:
<div style='overflow:hidden; width:500px;'>
<div style='overflow:scroll; width:508px'>
My scroll-able area
</div>
</div>
Αυτό είναι ένα τέχνασμα για να επικαλύψετε κάπως τη γραμμή κύλισης με ένα επικαλυπτόμενο div που δεν έχει καμία γραμμή κύλισης:
::-webkit-scrollbar {
display: none;
}
Αυτό ισχύει μόνο για τα προγράμματα περιήγησης WebKit... Ή θα μπορούσατε να χρησιμοποιήσετε περιεχόμενο CSS ειδικά για το πρόγραμμα περιήγησης (αν υπάρχει στο μέλλον). Κάθε πρόγραμμα περιήγησης θα μπορούσε να έχει μια διαφορετική και συγκεκριμένη ιδιότητα για τις αντίστοιχες μπάρες.
Για το Microsoft Edge χρησιμοποιήστε: -ms-overflow-style: -ms-autohiding-scrollbar;
ή -ms-overflow-style: none;
όπως σύμφωνα με το MSDN.
Δεν υπάρχει ισοδύναμο για τον Firefox. Παρόλο που υπάρχει ένα πρόσθετο jQuery για να επιτευχθεί αυτό, http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html
Προσθήκη
overflow: -moz-scrollbars-none;
δούλεψε για μένα.